SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2008
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Setting the width of a <select> object...

    Hello all.

    I have a situation where I need the width of a <select> object to be limited, regardless of the contents. I set the font-size to 6pt, any smaller and it will be unreadable.

    Is there a way of making the <select> use a scrollbar type method if the lenght is greater than X?

    I have room for 20 characters, the longest possible string is 36 characters.

    Any ideas?

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can set the width of the select element in your CSS, but you can't mimic a scrollbar effect.

    Louis

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2008
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Louistar View Post
    You can set the width of the select element in your CSS, but you can't mimic a scrollbar effect.

    Louis
    I set the width property in CSS but it didn't keep it from expanding. That's why I though maybe there was a different way (scrollbar type) to do it.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,803
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    If you set a width on a select then any options that are wider than that will be truncated. There is no way to add a horizontal scrollbar. You need to set the width wide enough for the widest entry and since the select does that by default the only reason for setting a width would be if you plan on dynamically adding wider entries and want the select to start off wide enough to fit the wider ones you might add.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

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