CODEWITHSUNDEEP
htmlhtml-selectdropdown
Niusha Ghanbari
Niusha Ghanbari

Reputation: 203

How can I set the width of HTML <select> element, without considering the width of each option

Actually I know the select box width is set by the longest option in the list, but I want to increase the length (width) of a select html element.

I also searched and I understand this code style="max-width:70%" may work but it doesn't work for me.

The code below is mine:

<select class="form-control"style="max-width:70%">
    <option value="1">option 1 </option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>

Upvotes: 16

Views: 19114

Answers (3)

Sheikh Haziq
Sheikh Haziq

Reputation: 53

This will help you.

    <select class="form control"style="width:70%">
    <option value="1">option 1 </option>
    <option value="2">option 2sdsdsdsd</option>
    <option value="3">option 3</option>
    </select>

Upvotes: -3

Sheida Mohassesy
Sheida Mohassesy

Reputation: 194

you should use width attribute instead of max-width. correct your code to below sample:

<select class="form-control"style="width:150px">
    <option value="1">option 1 </option>
    <option value="2">option 2sdsdsdsd</option>
    <option value="3">option 3</option>
</select>

Upvotes: 17

AkshayM
AkshayM

Reputation: 1441

You have to use css property min-width for increasing width of dropdown irrespective of the width of options.

html:

<select class="dropdown">
    <option value="1">option 1 </option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>

css:

.dropdown{
  min-width: 200px;
}

Upvotes: 5

Related Questions