Question

I’m working on a small project and having difficulty getting selectmenu and its items to stretch to fill a container. A width is being set and I can’t really tell where. I am new to this plugin and not much of a web dev.

It looks like the styles are defined in the stylesheet:

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

}

However when the page is rendered, a width is applied:

<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>

How can I set this to be 100% width? Sorry if this is simple.

Answer 1

Generally it’s not a very good practice, but for the sake of simplicity you can add !important to the CSS rule, it will protect it from overriding. Like this:

width: 97% !important;

Also you may need to add this rule;

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

Works on this page http://view.jqueryui.com/selectmenu/demos/selectmenu/default.html

Again, keep in ming, that it’s a really bad hack and I’m suggesting it only because you said you’re not a web dev and it’s the easiest solution.