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

Question

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>

Sheida Mohassesy · Accepted Answer · 2018-10-28 12:30:34Z

17

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>

answered Oct 28, 2018 at 12:30

Sheida Mohassesy

1947 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AkshayM · Accepted Answer · 2018-10-28 12:29:13Z

5

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

answered Oct 28, 2018 at 12:29

AkshayM

1,44110 silver badges21 bronze badges

2 Comments

wizzwizz4 Over a year ago

This is, imo, a better solution; the others will trigger overflow-y behaviour.

i alarmed alien Over a year ago

Separation of concerns—keeping styling information in a stylesheet—is also far better than an inline style attribute.

Sheikh Haziq · Accepted Answer · 2018-10-28 12:44:25Z

-3

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>

edited Oct 28, 2018 at 12:44

answered Oct 28, 2018 at 12:34

Sheikh Haziq

535 bronze badges

1 Comment

Bakuriu Over a year ago

As a new user thanks for your contribution. Note however that your answer is a duplicate of Sheida's, which I'm sure you did not see when posting your answer. Furthermore you answer lacks in details. Other people have to parse the HTML in your code block and compare it with the one in the question to understand what do you mean. It would be much more helpful to provide a textual description of the solution and not just the code. Even better with a couple links to the relevant documentation. If you keep this in mind you'll provide more valuable answers.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related