How can I increase the height of a select menu styled with jQuery’s user interface? I want to increase the height of the actual element, not the height of the dropdown menu of options that appears when you click it (there are a few answers on the site already for that). Basically, I want the menu to look squared, almost like a button instead.
I tried setting the height at the moment of applying the UI to the element in javascript. However, any height value I use seems to be ignored:
$(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>
>Solution :
This is a CSS issue in my book. The jQueryUI team used a span for that element, which is inline. You’ll need to change that first. We’ll use display: flex so we can easily align child items. Then set height and deal with the text position by aligning items to center.
$(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>