Question

如果我将百分比宽度分配给select（例如：100％），jQuery UI会以像素为单位计算等效宽度并将其分配给selectmenu小部件。但是，这会在调整屏幕大小时出现问题。有没有办法解决这个错误？

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();
  });

Answer 1

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

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

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

似乎可以解决问题： Updated Fiddle

您还可以定位创建的常规jquery UI类。我只是发现，如果你只与1或2个元素交配，那么当ID会做同样的事情时，需要花时间来解决这些问题。

Answer 2

请试试这个：

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

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

Answer 3

一种解决方案是覆盖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>

jQuery UI selectmenu不接受百分比宽度

3 个答案: