set width on jquery selectmenu

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: ``` ``` How can I set this to be 100% width? Sorry if this is simple.

Accepted Answer

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.

set width on jquery selectmenu

Solution

Problem