5

我正在做一个小项目，很难让 selectmenu 及其项目拉伸以填充容器。正在设置宽度，我真的不知道在哪里。我是这个插件的新手，并不是一个网络开发者。

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

#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% 宽度？对不起，如果这很简单。

4

3 回答 3

3

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

width: 97% !important;

此外，您可能需要添加此规则；

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

在此页面上工作http://view.jqueryui.com/selectmenu/demos/selectmenu/default.html

再说一次，请记住，这是一个非常糟糕的 hack，我建议它只是因为你说你不是 web 开发人员，它是最简单的解决方案。

于 2012-12-20T19:38:51.270 回答
2

我试图以百分比声明选择菜单的宽度，但 jQuery 每次将其减少 2%。我不知道为什么。

此示例创建宽度为 98% 的选择菜单。此选择菜单是响应式的。

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

我使用“calc”函数避免了这种行为。

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

减少 1px 是因为选择菜单的宽度被 jQuery 加宽以避免换行。我将此解决方案用于 jQuery UI 版本 1.11.4

于 2015-08-06T14:53:47.863 回答
1

这就是我动态执行的方式（响应式和百分比）：

在 CSS 中声明百分比：

 select{
    width: 100%;
 }

在你的 JavaScript 中：

jQuery("select").selectmenu(
        {
            width:  jQuery(this).attr("width"),
        }   
);
于 2015-02-20T23:39:23.247 回答