在jQuery selectmenu上设置宽度

Question

我正在从事一个小项目，很难让SelectMenu及其物品伸展以填充容器。正在设置一个宽度，我真的无法分辨在哪里。我是这个插件的新手，而不是Web Dev。

看起来样式是在样式表中定义的：

#PDropdown .ui-widget, .ui-selectmenu-menu .ui-widget{ 
font-family:'Lucida Sans';
font-size:.85em;
width: 97%; /* gets overridden....*/

}

但是，当页面渲染时，应用宽度：

<a class="ui-selectmenu ui-widget ui-state-default ui-corner-all ui-selectmenu-dropdown" id="PDropDownList-button" role="button" href="#nogo" tabindex="0" aria-haspopup="true" aria-owns="PDropDownList-menu" style="width: 135px;" aria-disabled="false"><span class="ui-selectmenu-status">Item</span><span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span></a>

如何将其设置为100％宽度？对不起，如果这很简单。

Answer 1

通常不是一个很好的做法，但是为了简单起见，您可以将!important添加到CSS规则中，它将保护其免受覆盖。这样：

width: 97% !important;

您也可能需要添加此规则;

.ui-selectmenu-open {width: 97.3% !important;}

在此页面上工作

再次，继续说，这是一个非常糟糕的黑客，我建议它只是因为您说您不是Web Dev，这是最简单的解决方案。

Answer 2

我试图以百分比声明SelectMenu的宽度，但每次都会将其减少2％。我不知道为什么。

该审查量创建宽度98％的SelectMenu。此Selecmenu反应迅速。

$("select").selecmenu(
    {
        width: "100%"
    }
);

i通过使用"计算"函数避免了这种行为。

$("select").selecmenu(
    {
        width: "calc(100% - 1px)"
    }
);

减少1px，因为SelectMenu的宽度通过jQuery扩大以避免包裹。我将此解决方案用于JQuery UI版本1.11.4

Answer 3

这就是我动态做的方式（响应且百分比）：

声明您的CSS中的百分比：

 select{
    width: 100%;
 }

和您的JavaScript：

jQuery("select").selectmenu(
        {
            width:  jQuery(this).attr("width"),
        }   
);