如何增加 jQueryUI 选择菜单的高度？

Question

如何增加使用 jQuery 用户界面设计的 select 菜单的高度？我想增加实际元素的高度，而不是单击它时出现的选项下拉菜单的高度（网站上已经有一些答案）。基本上，我希望菜单看起来是方形的，几乎像一个按钮。

我尝试在将 UI 应用于 javascript 中的元素时设置高度。但是，我使用的任何高度值似乎都被忽略了：

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

Answer 1

您忘记使用.css()函数来添加css高度。添加.css(height:100px)然后你会得到你的身高

Answer 2

select 元素设置为 display:none，因此操纵高度和宽度不会产生任何后果。您需要修改角色 combobox:

的兄弟 span 元素的高度和宽度

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

Answer 3

这是我书中的一个 CSS 问题。 jQueryUI 团队对该元素使用了跨度，它是内联的。你需要先改变它。我们将使用 display: flex 以便我们可以轻松对齐子项。然后设置高度并通过将项目居中对齐来处理文本位置。

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

如何增加 jQueryUI 选择菜单的高度？

How to increase height of jQueryUI selectmenu?

html

javascript

css

jquery-ui