Etiketi hizalayın ve sweetalert 2'de [kapalı] aynı satırdaki açılır menüyü seçin

Jan 05 2021

Sweetalert2 kullanarak etiket ve açılır menüyü aynı satırda hizalayabileceğim bir örnek arıyorum.

Bunu başarmak için özel etiket eklemeye çalıştım ama farklı bir çizgide gidiyor ve OK butonuna tıklayarak seçilen açılır menüyü konsolide etmek istiyorum.

Aşağıda stackblitz'im var.

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

Yanıtlar

1 LimonMonte Jan 06 2021 at 01:52

inputLabel+ customClassParametreleri kullanın :

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> 

Aşağıdakiler hakkında daha fazlasını okuyun customClass:https://sweetalert2.github.io/#customClass

1 AhmedMaher Jan 05 2021 at 11:42

Düz / stilli html kullanabilir ve açılır menü değerini normalde aşağıdaki gibi yakalayabilirsiniz:

 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
  }

   });