Căn chỉnh nhãn và chọn menu thả xuống trong cùng một hàng trong sweetalert 2 [đã đóng]

Question

Tôi đang tìm kiếm ví dụ nơi tôi có thể căn chỉnh nhãn và menu thả xuống trong cùng một hàng bằng cách sử dụng sweetalert2.

Tôi đã cố gắng thêm nhãn tùy chỉnh để đạt được điều này nhưng nó đi theo hướng khác và tôi muốn điều khiển trình đơn thả xuống đã chọn khi nhấp vào nút OK.

Dưới đây là stackblitz của tôi.

https://stackblitz.com/edit/angular-sweetalert-dropdown

Answer 1

Sử dụng inputLabel+ thông số customClass:

Swal.fire({
  title: 'Select + label in one row',
  input: 'select',
  inputOptions: {
    apples: 'Apples',
    bananas: 'Bananas',
    oranges: 'Oranges'
  },
  inputLabel: 'Select a fruit',
  customClass: {
    input: 'inline-flex',
    inputLabel: 'inline-flex'
  }
})

.inline-flex {
  display: inline-flex !important;
  margin: .5em !important;
}

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script> 

Đọc thêm về customClass:https://sweetalert2.github.io/#customClass

Answer 2

Bạn có thể sử dụng html đơn giản / theo kiểu và bắt giá trị thả xuống bình thường như sau:

 Swal.fire({

  showCancelButton: true,
  type: "warning",
  html: ` select reason <select name="cars" id="cars">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
          </select>`,

  preConfirm: function() {
  var elm = document.getElementById("cars");
  alert(elm.value); // use user selected value freely
  }

   });