如何增加jQueryUI選擇選單的高度？

如何增加使用 jQuery 用戶界面設計的選擇選單的高度？我想增加實際元素的高度，而不是單擊它時出現的選項下拉選單的高度（網站上已經有一些答案）。基本上，我希望選單看起來是方形的，而不是像一個按鈕。

我嘗試在將 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>

uj5u.com熱心網友回復：

這是我書中的一個 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>

uj5u.com熱心網友回復：

select 元素被設定為display:none這樣操作高度和寬度不會產生任何后果。您需要span使用 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>

uj5u.com熱心網友回復：

您忘記使用 .css() 函式來添加高度的 css。添加 .css(height:100px) 然后你會得到你的高度

標籤：javascript html css jquery-ui

上一篇：按多欄位打字稿排序

下一篇：wordpress產品頁面上的自定義文本顏色