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

Question

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

我尝试在将 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 问题。 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>

Answer 2

选择元素设置为display:none，因此操作高度和宽度不会产生任何影响。你需要修改span角色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>

Answer 3

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