How to increase height of jQueryUI selectmenu?

user_10530633 0
Viewed 65

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>

jquery-ui css html javascript
3 Answers

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>

user_12648040

The select element is set to display:none so manipulating the height and width do nothing of consequence. You need to modify the height and width of the sibling span element with role combobox:

$(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>

user_48301960

you forget to use .css() function to add the css of height. add .css(height:100px) and then you will get your height

user_177436360
Related