He creado un pop sweetAlert2 que incluye tanto HTML como funcionalidad de selección. El problema es que el cuadro de selección se está cargando en la parte inferior de la ventana emergente debajo del HTML.
var array = '[{"teachName" : "Pending Account", "teachNum" : "99999999"},{"teachName" : "test, test", "teachNum" : "101-temp"}]'; var options = {}; $.map(array, function(o){ options[o.teachNum] = o.teachName; }); swal({ title: date.format("MM/DD/YYYY"), type: 'info', input: 'select', inputOptions: options , html: 'Teacher: ' + $("#teacher").val() + '<br /><br /><div style="border:2px solid purple;" >' + 'Hours: ' + '<input type="text" autofocus id="hours" style="display:block !important;" class="sweet-alert-input"/>' + '<br />Notes: ' + '<br /><input type="text" autofocus id="notes" style="display:block !important;" class="sweet-alert-input"/></div>' + '<button type="' + btn + '" id="btnD" value="' + date.format("MM/DD/YYYY") + '" class="sweet-alert2-button">Save Record</button> ' + '<button type="' + btn + '" id="btnC" style="background-color: #B9B9B9 !important;" class="sweet-alert2-button">Cancel</button>', showConfirmButton: false });Me gustaría que el cuadro de selección esté encima del código HTML. Por favor, indique cómo puedo solucionar este problema. Aquí está mi código.
En primer lugar: la definición de su matriz es incorrecta: elimine los delimitadores de cadena.
Puede usar el evento sweetalert2 onOpen para mover su cuadro de selección sobre el código HTML .
Para lograr esto, puede usar .insertBefore()
onOpen: function(ele) { $(ele).find('.swal2-select').insertBefore($(ele).find('.swal2-content div')); }El fragmento:
var array = [{"teachName": "Pending Account", "teachNum": "99999999"}, {"teachName": "test, test", "teachNum": "101-temp"}]; var options = {}; $.map(array, function (o) { options[o.teachNum] = o.teachName; }); var btn = 'button'; swal({ title: moment().format("MM/DD/YYYY"), type: 'info', input: 'select', inputOptions: options, html: 'Teacher: ' + $("#teacher").val() + '<br /><br /><div style="border:2px solid purple;" >' + 'Hours: ' + '<input type="text" autofocus id="hours" style="display:block !important;" class="sweet-alert-input"/>' + '<br />Notes: ' + '<br /><input type="text" autofocus id="notes" style="display:block !important;" class="sweet-alert-input"/></div>' + '<button type="' + btn + '" id="btnD" value="' + moment().format("MM/DD/YYYY") + '" class="sweet-alert2-button">Save Record</button> ' + '<button type="' + btn + '" id="btnC" style="background-color: #B9B9B9 !important;" class="sweet-alert2-button">Cancel</button>', showConfirmButton: false, onOpen: function(ele) { $(ele).find('.swal2-select').insertBefore($(ele).find('.swal2-content div')); } }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/sweetalert2/6.5.6/sweetalert2.min.css"> <script src="https://cdn.jsdelivr.net/sweetalert2/6.5.6/sweetalert2.min.js"></script>