jQuery UI选择菜单没有't接受百分比宽度

jQuery UI selectmenu doesn't accept widths in percentage

本文关键字：百分比 选择 UI 菜单 jQuery      更新时间：2023-09-26

如果我将一个以百分比表示的宽度分配给一个选择（例如：100%），jQuery UI将计算以像素表示的等效宽度，并将其分配给selectmenu小部件。但是，这会导致调整屏幕大小时出现问题。有办法修复这个错误吗？

JSFiddle

HTML:

<form action="#">
  <fieldset>
    <label for="speed">Select a speed</label>
    <select name="speed" id="speed">
      <option>Slower</option>
      <option>Slow</option>
      <option selected="selected">Medium</option>
      <option>Fast</option>
      <option>Faster</option>
    </select>
  </fieldset>
</form>
</div>

CSS：

body{font-family:arial}
fieldset {
  border: 0;
}
label {
  display: block;
  margin-bottom: 10px;
}
select {
  width: 100%;
}

Javascript：

  $(function() {
    $( "#speed" ).selectmenu();
  });

检查项目以验证分配的jquery UI iD。选择菜单通常为#[element]-button。

然后将CSS应用于该ID。在这种情况下，

#speed-button {
      width: 100% !important;
    }

似乎解决了这个问题：更新的Fiddle

您还可以针对所创建的通用jquery UI类。我只是发现，如果你只处理1或2个元素，那么ID什么时候会做同样的事情会很耗时。

一个解决方案是覆盖像这样的jQuery UI样式

$(function() {
  $("#speed").selectmenu();
});
body {
  font-family: arial
}
fieldset {
  border: 0;
}
label {
  display: block;
  margin-bottom: 10px;
}
select {
  width: 100%;
}
#speed + .ui-selectmenu-button {
  width: 100% !important;
}
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="demo">
  <form action="#">
    <fieldset>
      <label for="speed">Select a speed</label>
      <select name="speed" id="speed">
        <option>Slower</option>
        <option>Slow</option>
        <option selected="selected">Medium</option>
        <option>Fast</option>
        <option>Faster</option>
      </select>
    </fieldset>
  </form>
</div>

请尝试以下操作：

.ui-selectmenu-button{width:100%}

JSFiddle:https://jsfiddle.net/yzzxvbuw/11/

相关文章：