-
Dec 18th, 2018, 01:27 PM
#1
How to set the width of an HTML SELECT INPUT
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
-
Jan 23rd, 2019, 07:41 AM
#2
Re: How to set the width of an HTML SELECT INPUT
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?
Feeling like a fly on the inside of a closed window (Thunk!)
If I post a lot, it is because I am bored at work! ;D Or stuck...
* Anything I post can be only my opinion. Advice etc is up to you to persue...
-
Jan 23rd, 2019, 07:55 AM
#3
Re: How to set the width of an HTML SELECT INPUT
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
-
Jan 23rd, 2019, 08:24 AM
#4
Re: How to set the width of an HTML SELECT INPUT
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
Feeling like a fly on the inside of a closed window (Thunk!)
If I post a lot, it is because I am bored at work! ;D Or stuck...
* Anything I post can be only my opinion. Advice etc is up to you to persue...
-
Oct 23rd, 2019, 11:52 PM
#5
Member
Re: How to set the width of an HTML SELECT INPUT
Hi, you can try like this:
Code:
select, input[type="text"]{
width:100%;
box-sizing:border-box;
}
-
Jan 10th, 2020, 12:53 AM
#6
Lively Member
Re: How to set the width of an HTML SELECT INPUT
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.
-
Jan 10th, 2020, 08:12 AM
#7
Re: How to set the width of an HTML SELECT INPUT
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.
-
Mar 6th, 2020, 01:42 AM
#8
Member
Re: How to set the width of an HTML SELECT INPUT
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;
}
< advertising removed by moderator >
-
Mar 6th, 2020, 01:43 AM
#9
Member
Re: How to set the width of an HTML SELECT INPUT
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;
}
< advertising removed by moderator >
-
Mar 7th, 2020, 09:25 AM
#10
Re: How to set the width of an HTML SELECT INPUT
~ the original bald headed old fart ~
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|