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

Clash Royale CLAN TAG#URR8PPP

up vote
8
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 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>

html html-select dropdown

share|improve this question

edited 14 mins ago

user202729

9513718

asked 6 hours ago

Niusha Ghanbari

637

add a comment | 

up vote
8
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 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>

html html-select dropdown

share|improve this question

edited 14 mins ago

user202729

9513718

asked 6 hours ago

Niusha Ghanbari

637

add a comment | 

up vote
8
down vote

favorite

up vote
8
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 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>

html html-select dropdown

share|improve this question

edited 14 mins ago

user202729

9513718

asked 6 hours ago

Niusha Ghanbari

637

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>

html html-select dropdown

html html-select dropdown

share|improve this question

edited 14 mins ago

user202729

9513718

asked 6 hours ago

Niusha Ghanbari

637

share|improve this question

edited 14 mins ago

user202729

9513718

asked 6 hours ago

Niusha Ghanbari

637

share|improve this question

share|improve this question

edited 14 mins ago

user202729

9513718

edited 14 mins ago

user202729

9513718

edited 14 mins ago

user202729

9513718

9513718

asked 6 hours ago

Niusha Ghanbari

637

asked 6 hours ago

Niusha Ghanbari

637

asked 6 hours ago

Niusha Ghanbari

637

637

add a comment | 

add a comment | 

3 Answers
3

active

oldest

votes

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

share|improve this answer

answered 6 hours ago

Sheida Mohassesi

864

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

share|improve this answer

answered 6 hours ago

AkshayM

470212

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  This is, imo, a better solution; the others will trigger overflow-y behaviour.
  – wizzwizz4
  5 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Separation of concerns—keeping styling information in a stylesheet—is also far better than an inline style attribute.
  – i alarmed alien
  2 hours ago
  

  
  
  
  

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>

share|improve this answer

edited 6 hours ago

answered 6 hours ago

Sheikh Haziq

32

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.

• 
  
  
  

  
  4
  

  
  
  
  
  
  

  
  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.
  – Bakuriu
  5 hours ago
  

  
  
  
  

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

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

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

);

Post as a guest

Name Email

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

active

oldest

votes

active

oldest

votes

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

share|improve this answer

answered 6 hours ago

Sheida Mohassesi

864

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

share|improve this answer

answered 6 hours ago

Sheida Mohassesi

864

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



accepted

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

share|improve this answer

answered 6 hours ago

Sheida Mohassesi

864

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.

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>

share|improve this answer

answered 6 hours ago

Sheida Mohassesi

864

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.

share|improve this answer

share|improve this answer

answered 6 hours ago

Sheida Mohassesi

864

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.

answered 6 hours ago

Sheida Mohassesi

864

answered 6 hours ago

Sheida Mohassesi

864

864

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.

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.

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 | 

add a comment | 

up vote
3
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;

share|improve this answer

answered 6 hours ago

AkshayM

470212

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  This is, imo, a better solution; the others will trigger overflow-y behaviour.
  – wizzwizz4
  5 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Separation of concerns—keeping styling information in a stylesheet—is also far better than an inline style attribute.
  – i alarmed alien
  2 hours ago
  

  
  
  
  

add a comment | 

up vote
3
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;

share|improve this answer

answered 6 hours ago

AkshayM

470212

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  This is, imo, a better solution; the others will trigger overflow-y behaviour.
  – wizzwizz4
  5 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Separation of concerns—keeping styling information in a stylesheet—is also far better than an inline style attribute.
  – i alarmed alien
  2 hours ago
  

  
  
  
  

add a comment | 

up vote
3
down vote

up vote
3
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;

share|improve this answer

answered 6 hours ago

AkshayM

470212

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;

share|improve this answer

answered 6 hours ago

AkshayM

470212

share|improve this answer

share|improve this answer

answered 6 hours ago

AkshayM

470212

answered 6 hours ago

AkshayM

470212

answered 6 hours ago

AkshayM

470212

470212

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  This is, imo, a better solution; the others will trigger overflow-y behaviour.
  – wizzwizz4
  5 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Separation of concerns—keeping styling information in a stylesheet—is also far better than an inline style attribute.
  – i alarmed alien
  2 hours ago
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  This is, imo, a better solution; the others will trigger overflow-y behaviour.
  – wizzwizz4
  5 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Separation of concerns—keeping styling information in a stylesheet—is also far better than an inline style attribute.
  – i alarmed alien
  2 hours ago
  

  
  
  
  

1

1

This is, imo, a better solution; the others will trigger overflow-y behaviour.
– wizzwizz4
5 hours ago

This is, imo, a better solution; the others will trigger overflow-y behaviour.
– wizzwizz4
5 hours ago

Separation of concerns—keeping styling information in a stylesheet—is also far better than an inline style attribute.
– i alarmed alien
2 hours ago

Separation of concerns—keeping styling information in a stylesheet—is also far better than an inline style attribute.
– i alarmed alien
2 hours ago

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>

share|improve this answer

edited 6 hours ago

answered 6 hours ago

Sheikh Haziq

32

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.

• 
  
  
  

  
  4
  

  
  
  
  
  
  

  
  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.
  – Bakuriu
  5 hours ago
  

  
  
  
  

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>

share|improve this answer

edited 6 hours ago

answered 6 hours ago

Sheikh Haziq

32

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.

• 
  
  
  

  
  4
  

  
  
  
  
  
  

  
  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.
  – Bakuriu
  5 hours ago
  

  
  
  
  

add a comment | 

up vote
0
down vote

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>

share|improve this answer

edited 6 hours ago

answered 6 hours ago

Sheikh Haziq

32

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.

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>

share|improve this answer

edited 6 hours ago

answered 6 hours ago

Sheikh Haziq

32

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.

share|improve this answer

share|improve this answer

edited 6 hours ago

edited 6 hours ago

edited 6 hours ago

answered 6 hours ago

Sheikh Haziq

32

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.

answered 6 hours ago

Sheikh Haziq

32

answered 6 hours ago

Sheikh Haziq

32

32

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.

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.

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

• 
  
  
  

  
  4
  

  
  
  
  
  
  

  
  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.
  – Bakuriu
  5 hours ago
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  4
  

  
  
  
  
  
  

  
  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.
  – Bakuriu
  5 hours ago
  

  
  
  
  

4

4

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.
– Bakuriu
5 hours 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.
– Bakuriu
5 hours ago

add a comment | 

 

draft saved

draft discarded

 

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

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

);

Post as a guest

Name Email

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

Name Email

Name

Email

Name Email

Name

Email