dcsimg
Results 1 to 7 of 7

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

  1. #1

    Thread Starter
    PowerPoster techgnome's Avatar
    Join Date
    May 2002
    Posts
    32,680

    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
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

  2. #2
    Don't Panic! Ecniv's Avatar
    Join Date
    Nov 2000
    Location
    Amsterdam...
    Posts
    5,343

    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?

    BOFH Now, BOFH Past, Information on duplicates

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

  3. #3

    Thread Starter
    PowerPoster techgnome's Avatar
    Join Date
    May 2002
    Posts
    32,680

    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
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

  4. #4
    Don't Panic! Ecniv's Avatar
    Join Date
    Nov 2000
    Location
    Amsterdam...
    Posts
    5,343

    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

    BOFH Now, BOFH Past, Information on duplicates

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

  5. #5

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

  6. #6
    Junior Member
    Join Date
    Jan 2020
    Posts
    17

    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.

  7. #7

    Thread Starter
    PowerPoster techgnome's Avatar
    Join Date
    May 2002
    Posts
    32,680

    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.
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Featured


Click Here to Expand Forum to Full Width