How can I set the width of select html element, without considering of each option width

up vote
6
down vote

favorite

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

Thank you for your responding.

asked 44 mins ago

Niusha Ghanbari

507

add a commentÂ |Â

up vote
6
down vote

favorite

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

Thank you for your responding.

asked 44 mins ago

Niusha Ghanbari

507

add a commentÂ |Â

up vote
6
down vote

favorite

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

Thank you for your responding.

asked 44 mins ago

Niusha Ghanbari

507

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

Thank you for your responding.

html html-select dropdown

asked 44 mins ago

Niusha Ghanbari

507

asked 44 mins ago

Niusha Ghanbari

507

asked 44 mins ago

Niusha Ghanbari

507

asked 44 mins ago

Niusha Ghanbari

507

asked 44 mins ago

Niusha Ghanbari

507

add a commentÂ |Â

3 Answers
3

active

oldest

votes

up vote
4
down vote

accepted

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 38 mins ago

Sheida Mohassesi

564

New contributor

add a commentÂ |Â

up vote
1
down vote

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 40 mins ago

AkshayM

435212

add a commentÂ |Â

up vote
0
down vote

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 24 mins ago

answered 34 mins ago

Sheikh Haziq

New contributor

add a commentÂ |Â

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: false,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53031489%2fhow-can-i-set-the-width-of-select-html-element-without-considering-of-each-opti%23new-answer', 'question_page');

);

Post as a guest

Name

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

up vote
4
down vote

accepted

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 38 mins ago

Sheida Mohassesi

564

New contributor

add a commentÂ |Â

up vote
4
down vote

accepted

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 38 mins ago

Sheida Mohassesi

564

New contributor

add a commentÂ |Â

up vote
4
down vote

accepted

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 38 mins ago

Sheida Mohassesi

564

New contributor

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 38 mins ago

Sheida Mohassesi

564

New contributor

answered 38 mins ago

Sheida Mohassesi

564

New contributor

answered 38 mins ago

Sheida Mohassesi

564

answered 38 mins ago

Sheida Mohassesi

564

New contributor

Sheida Mohassesi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

add a commentÂ |Â

up vote
1
down vote

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 40 mins ago

AkshayM

435212

add a commentÂ |Â

up vote
1
down vote

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 40 mins ago

AkshayM

435212

add a commentÂ |Â

up vote
1
down vote

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 40 mins ago

AkshayM

435212

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 40 mins ago

AkshayM

435212

answered 40 mins ago

AkshayM

435212

answered 40 mins ago

AkshayM

435212

answered 40 mins ago

AkshayM

435212

add a commentÂ |Â

up vote
0
down vote

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 24 mins ago

answered 34 mins ago

Sheikh Haziq

New contributor

add a commentÂ |Â

up vote
0
down vote

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 24 mins ago

answered 34 mins ago

Sheikh Haziq

New contributor

add a commentÂ |Â

up vote
0
down vote

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 24 mins ago

answered 34 mins ago

Sheikh Haziq

New contributor

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 24 mins ago

answered 34 mins ago

Sheikh Haziq

New contributor

edited 24 mins ago

answered 34 mins ago

Sheikh Haziq

New contributor

answered 34 mins ago

Sheikh Haziq

answered 34 mins ago

Sheikh Haziq

New contributor

Sheikh Haziq is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

add a commentÂ |Â

draft saved

draft discarded

draft saved

draft discarded

Post as a guest

Name

Search This Blog

Iyfjky