SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    Custom User Title v1.0 FireFly's Avatar
    Join Date
    Aug 2001
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Giving <select> a minimum width that will be overwritten by any longer data

    (They say use a descriptive subject... )

    Ok, this is my problem. When the page loads, I have an empty <select> and a full <select>. Using JavaScript, you can press a button and move items from one list to another.

    The problem is, the empty <select> has no width, and since I don't know what the items in the list would be (they can be as short as 2 letters or as long as 100 letters), I don't give it any fixed width.

    My question is, how can I give a <select> an inital width, but still allow the list to expand its width once new, longer values are entered.

    Thanks for any little bit of help!

    Chen

  2. #2
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    could you insert a whole pile of blank spaces initially? A bit dodgy, I know, but it's the only think I can think of that would work

  3. #3
    Custom User Title v1.0 FireFly's Avatar
    Join Date
    Aug 2001
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the hint.

    What I did was give the <select> an <option> with some spaces, and then with JavaScript removed that option... the browser doesn't know what hit him!

    Thanks again.

    Chen

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Use stylesheets!
    Code:
    <style type="text/css">
    select{width:200px}
    </style>
    ...
    <select name="mySelect">
    <option></option>
    </select>
    This will set a minimum width on all selects to 200px, and will grow if you need it.

    --Vinnie

  5. #5
    SitePoint Member XiXora's Avatar
    Join Date
    May 2002
    Location
    Birmingham, UK
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    man with a plan!

  6. #6
    Custom User Title v1.0 FireFly's Avatar
    Join Date
    Aug 2001
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, but that's not what I want(ed). Your code gives the <select> a FIXED width, not a MINIMUM width.

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Change the stylesheet to this:
    Code:
    <style type="text/css">
    select{min-width:200px;}
    </style>
    --Vinnie

  8. #8
    Custom User Title v1.0 FireFly's Avatar
    Join Date
    Aug 2001
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again, but there is no such attribute.

  9. #9
    SitePoint Zealot 19nine78's Avatar
    Join Date
    Feb 2002
    Location
    Ayr, scotland
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again, but there is no such attribute.
    http://www.w3.org/TR/REC-CSS2/visude...min-max-widths

    There is, it's just not very well supported...
    It works in mozilla but not in IE on the PC, can't comment on others.

    haven't tested this, but what does 'width:auto' do??

    cheers

    alastair


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
  •