How to set the width of an HTML SELECT INPUT

**techgnome** · Dec 18th, 2018, 01:27 PM

The default width of an HTML select input tag is the length of the longest option item... the problem though is that it doesn't seem to take into consideration the drop-down button... so if the longest item is selected, it ends up getting cut off... in the drop down selection list, it displays fine... it's only if the item is selected once the list rolls up, is when it gets cut off. Is there a way, short of setting the style="width: xxxpx;" with a specific width size to say, "make the drop down the widest option, plus X for the button"? I suspect probably not, but I thoughjt I'd ask.

-tg

**Ecniv** · Jan 23rd, 2019, 07:41 AM

Hi

I dont think so. Perhaps an addition browser specific, or perhaps you can replace the dropdown/list with custom divs and JS (display and ajax).
But if it auto expanded, it might pop out of its container or push other items around.
Possibly you could add JS to check onblur. You'd still need a default value to use, but it could expand the width.

Seems ok in Firefox... Which browser are you using?

**techgnome** · Jan 23rd, 2019, 07:55 AM

I'd forgotten I made this post. I think we've also resolved the issue, but I'm not sure how - the issue itself was assigned to a colleague, I was back-seat coding while learning the system at the time. Officially we support IE11... unofficially we support IE11 and Chrome, so it has to work in both of those. Ah, yes I remember what we did now... the list is static, so we just got the current width, and then added enough to account for the drop-down arrow and set that for the width and called it a day. Seems to have worked.

-tg

**Ecniv** · Jan 23rd, 2019, 08:24 AM

Code:

<html>
<head>
<script type="text/javascript" id="scriptJS">
function teste(){
alert('boo');
}
function resizeCombo(o){

	var chs = o.children.length;
	for( var i = 0; i<chs; i++ ){
		if( o.value == o.children[i].value ){
		console.log( o.children[i] );
		o.style.width = ((o.children[i].text.length * 9)+12) +"px"
		}
	}

}
</script>
</head>
<body>
<form>
<pre>
<select id="cmb" onBlur="resizeCombo(this);">
<option id="0" selected value="0">Choose</option>
<option id="1" value="1">Some Text</option>
<option id="2" value="2">Very long text to show and display cropped</option>
</pre>
</form>
</body>
</html>

Simple html to show the idea... doesn't work perfectly

**Siddhi Patel** · Oct 23rd, 2019, 11:52 PM

Hi, you can try like this:

Code:

select, input[type="text"]{
      width:100%;
      box-sizing:border-box;
    }

**Prahlad** · Jan 10th, 2020, 12:53 AM

Hello, @techgnome

Follow this code to set the width of an HTML Select menu.

Code:

<!DOCTYPE html>
<html>
<head>
<style> 
select {
  width: 200px;
  padding: 16px 30px;
  border: none;
  border-radius: 20px;
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<p>Try this Code for Give Style on Select Menu</p>

<form>
  <select>
  <option value="au">Australia</option>
  <option value="ca">Canada</option>
  <option value="usa">USA</option>
  </select>
</form>

</body>
</html>

I hope above code will be useful for you.

Thank you.

**techgnome** · Jan 10th, 2020, 08:12 AM

Ummm... yeah... *checks date* yeah... like a year late.... doesn't anyone check the date on these things? It's been resolved on our end for sometime now but hopefully someone else may find it useful. And the problem wasn't being able to set a width in general, that I could do, it was setting a width that was wide enough for the widest content AND the dropdown arrow of the select box... since the content is dynamic, I couldn't measure what the width would be and just got with it. I don't know what the content will be. That will be up to others that are going to be using the system. Our system works on plugins and the dropdown in question lists the categories of the plugins found, so there's no telling what it'll find. It could be as simple as "D0" or as complicated as "Obi Wan's Emporium of Fine Droids You're Not Looking For." .... O.O

-tg

ADDENDUM: Ahhh.... I see now that this issue is older than I realized and goes back to the old system where the list was static.... so yeah, we just added some padding to the CSS of the select in question and called it good. Which makes me wonder what we're doing on the new system now.

**Siddhi Patel** · Mar 6th, 2020, 01:42 AM

Hello..
Just apply this css to your select to set width of select.

Code:

select {
  width: 200px;
  padding: 16px 30px;
  border: none;
  border-radius: 20px;
  background-color: #f1f1f1;
}

**Siddhi Patel** · Mar 6th, 2020, 01:43 AM

Hello..
Just apply this css to your select to set width of select.

Code:

select {
  width: 200px;
  padding: 16px 30px;
  border: none;
  border-radius: 20px;
  background-color: #f1f1f1;
}

**coothead** · Mar 7th, 2020, 09:25 AM

Hi there techgnome,

in it's natural state - ( HTML only ) - the select element's
width is set to the that of it's longest option element.

Example:-

https://codepen.io/coothead/pen/dyoZJwa

Thread: How to set the width of an HTML SELECT INPUT

Thread Tools

Display

How to set the width of an HTML SELECT INPUT

Re: How to set the width of an HTML SELECT INPUT

Re: How to set the width of an HTML SELECT INPUT

Re: How to set the width of an HTML SELECT INPUT

Re: How to set the width of an HTML SELECT INPUT

Re: How to set the width of an HTML SELECT INPUT

Re: How to set the width of an HTML SELECT INPUT

Re: How to set the width of an HTML SELECT INPUT

Re: How to set the width of an HTML SELECT INPUT

Re: How to set the width of an HTML SELECT INPUT

Posting Permissions