¿Cómo puedo aumentar la altura de un menú de selección diseñado con la interfaz de usuario de jQuery? Quiero aumentar la altura del elemento real, no la altura del menú desplegable de opciones que aparece cuando hace clic en él (ya hay algunas respuestas en el sitio para eso). Básicamente, quiero que el menú se vea cuadrado, casi como un botón.
Intenté establecer la altura en el momento de aplicar la interfaz de usuario al elemento en javascript. Sin embargo, cualquier valor de altura que uso parece ser ignorado:
$(document).ready(function() { let testSelect = document.createElement('select'); let firstOption = document.createElement('option'); firstOption.text = 'blablablabla...'; firstOption.defaultSelected = true; testSelect.appendChild(firstOption); document.getElementById('testDiv').appendChild(testSelect); $(testSelect).selectmenu({height: '50%'}); // no matter what value of height I use, the menu does not change testButton = document.createElement('button'); testButton.innerHTML = 'Like this example button'; $(testButton).button(); document.getElementById('testDiv').appendChild(testButton); // I want the select menu to look similar to a button like this }); <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.13.0/themes/redmond/jquery-ui.css"> <div id="testDiv" style="width:100px; height:100px;"></div>Este es un problema de CSS en mi libro. El equipo de jQueryUI usó un lapso para ese elemento, que está en línea. Tendrás que cambiar eso primero. Usaremos display: flex para que podamos alinear fácilmente los elementos secundarios. Luego establezca la altura y trate con la posición del texto alineando los elementos al centro.
$(document).ready(function() { let testSelect = document.createElement('select'); let firstOption = document.createElement('option'); firstOption.text = 'blablablabla...'; firstOption.defaultSelected = true; testSelect.appendChild(firstOption); document.getElementById('testDiv').appendChild(testSelect); $(testSelect).selectmenu(); }); .ui-selectmenu-button.ui-button { display: flex; align-items: center; height: 100px; } <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.13.0/themes/redmond/jquery-ui.css"> <div id="testDiv" style="width:100px; height:100px;"></div>El elemento de selección está configurado para display:none , por lo que manipular la altura y el ancho no tiene consecuencias. Debe modificar la altura y el ancho del elemento de span hermano con el combobox de roles:
$(document).ready(function() { let testSelect = document.createElement('select'); let firstOption = document.createElement('option'); firstOption.text = 'blablablabla...'; firstOption.defaultSelected = true; testSelect.appendChild(firstOption); document.getElementById('testDiv').appendChild(testSelect); $(testSelect).selectmenu({ height: '50%' }); // no matter what value of height I use, the menu does not change - this is because the select is set to display:none //set the height/width of the sibling span $(testSelect).siblings('span').css({ height: '150px' }); }); <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.13.0/themes/redmond/jquery-ui.css"> <div id="testDiv" style="width:100px; height:100px;"></div>te olvidas de usar la función .css() para agregar el css de altura. agregue .css(height:100px) y luego obtendrá su altura