css - set max-width for select

Question

I have a form with a drop down list of venues and a submit button. They are supposed to be on the same line, but since the list of venues is dynamic, it could become too long and push the button down.

I was thinking of setting a max-width property to the select, but I'm not clear whether this will work in all browsers. Do you have any suggestions on a workaround?

<form action="http://localhost/ci-llmg/index.php/welcome/searchVenueForm" method="post"     class="searchform">
    <select name="venue"> 
        <option value="0" selected="selected">Select venue...</option> 
        <option value="1">venue 0</option> 
        <option value="2">club 1</option> 
        <option value="3">disco 2</option> 
        <option value="4">future test venue</option> 
    </select>
    <input type="submit" name="" value="Show venue!" class="submitButton"  />
</form>

css:

.searchform select {
max-width: 320px;
}

.searchform input.submitButton {
float: right;
}

Does this answer your question? [How to make select elements shrink to max-width percent style within fieldset](https://stackoverflow.com/questions/10672586/how-to-make-select-elements-shrink-to-max-width-percent-style-within-fieldset) — vsync, Jan 14 '21 at 15:56

score 8 · Accepted Answer · answered Apr 07 '10 at 11:06

8

If the venues are generated on the server side, you can use your server-side scripting to cut them down to a specific maximum character count.

When using pure CSS I'd also try setting overflow:hidden, both on the select and the option elements. Also try setting max-width on the option element. When it works in all non-IE, you can use the usual scripts to add max-width support for IE.

answered Apr 07 '10 at 11:06

chiborg

25,223
12
95
113

Probably you're right, best solution is cutting it using php. thanks – Patrick Apr 07 '10 at 14:54

score -1 · Answer 2 · edited Apr 06 '16 at 18:51

-1

try:

fieldset select {
  width: auto;
}

edited Apr 06 '16 at 18:51

showdev

27,301
36
51
71

answered Apr 06 '16 at 13:41

kmchen

41
5

css - set max-width for select

2 Answers2