Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: dropdown box width adjustment

  1. #1
    Join Date
    Mar 2006
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default dropdown box width adjustment

    I have a dropdown box which i am restricting to a width of 100px with the style="width: 100px" tag.

    I want the resulting drop down box displaying the list of selectable values to expand to the size of the largest value so that all the options available are fully displayed.

    is this possible??

  2. #2
    Join Date
    Feb 2006
    Posts
    158
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    As in, if something is more than 100px in width you want the box to expand width-wise, otherwise you want the box to be 100px in width?

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    If you want the minimum width to be 100px use that:

    Code:
    style="min-width:100px;"
    This only works in non-IE browsers (v7 possibly the exception).

    In IE you need to use a javascript dependant expression. I don't think it is worth the trouble in this case as, you could just remove the width style altogether, then the drop down will assume the width of the widest item.

    By the way, the inline style attribute is just that, it is not a 'tag'.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Mar 2006
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    i want the displayed select list field to be fixed at 100px
    when you click on the select list and expand the box displaying all available options, i want the drop down box to expand to the largest item size (whilst keeping the select list item itself fixed at 100px) so that the options text is not chopped at 100px

    I don't mind the value being chopped once it has been selected
    (limited space on the screen and need to fix the item size for display purposes).

  5. #5
    Join Date
    Mar 2006
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    any help much appreciated

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    There is no way I can see to do this very well across browsers. For Opera 9, FF 1.5.0.4, and IE 6 all on the PC this is about as good as it gets. Unfortunately, it looks the worst in IE 6 - the most widely used browser:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    @media all and (min-width: 0px){
      .os {
     position:relative;
     height:1.2em;
      }
    .os select {
    position:absolute;
    right:0;
    }
    }
    </style>
    </head>
    <body>
    <div class="os" style="width:100px;overflow:hidden;border-right:1px solid gray;">
    <select name="ed" dir="rtl">
    <option dir="ltr" selected>[select]</option>
    <option dir="ltr" value="">word g g fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
    <option dir="ltr" value="">fffffffffffffffffffffffffffffffffffffffffffffffffff</option>
    <option dir="ltr" value="">ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
    <option dir="ltr" value="">ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
    <option dir="ltr" value="">ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
    <option dir="ltr" value="">ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
    <option dir="ltr" value="">ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
    <option dir="ltr" value="">ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
    <option dir="ltr" value="">ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
    <option dir="ltr" value="">ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
    </select>
    </div>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Jan 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Left aligned options...

    Hi John

    I love your dropdown box solution! Really handy.

    How do you make the dropdown arrow to be on the right hand side
    and more importantly
    how do you make all of the options left aligned?
    When I changed ltr to rtl the dropdown arrow disappeared.

    Thanks in advance.

    Andy

  8. #8
    Join Date
    Nov 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by rizlaa View Post
    I have a dropdown box which i am restricting to a width of 100px with the style="width: 100px" tag.

    I want the resulting drop down box displaying the list of selectable values to expand to the size of the largest value so that all the options available are fully displayed.

    is this possible??
    i want an urgent solution

  9. #9
    Join Date
    Nov 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I have a dropdown box which i am restricting to a width of 100px with the style="width: 100px" tag.

    I want the resulting drop down box displaying the list of selectable values to expand to the size of the largest value so that all the options available are fully displayed.

    is this possible??
    I want a solution of this using javascript. Moreover if I select one option then do not change the length of selectbox.

  10. #10
    Join Date
    May 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    There is no way I can see to do this very well across browsers. For Opera 9, FF 1.5.0.4, and IE 6 all on the PC this is about as good as it gets. Unfortunately, it looks the worst in IE 6 - the most widely used browser:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    @media all and (min-width: 0px){
      .os {
     position:relative;
     height:1.2em;
      }
    .os select {
    position:absolute;
    right:0;
    }
    }
    </style>
    </head>
    <body>
    <div class="os" style="width:100px;overflow:hidden;border-right:1px solid gray;">
    <select name="ed" dir="rtl">
    <option dir="ltr" selected>[select]</option>
    <option dir="ltr" value="">word g g fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
    <option dir="ltr" value="">fffffffffffffffffffffffffffffffffffffffffffffffffff</option>
    <option dir="ltr" value="">ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
    <option dir="ltr" value="">ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
    <option dir="ltr" value="">ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
    <option dir="ltr" value="">ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
    <option dir="ltr" value="">ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
    <option dir="ltr" value="">ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
    <option dir="ltr" value="">ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
    <option dir="ltr" value="">ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</option>
    </select>
    </div>
    </body>
    </html>

    Hi John

    Really very good artical,helps a lot. But i have a small issue with this.

    Could you please help me with the following question?

    How do you make the dropdown arrow to be on the right hand side
    and more importantly
    how do you make all of the options left aligned?
    When I changed ltr to rtl the dropdown arrow disappeared.
    I want dropdown list should be scrollable

    Request you please help and share the solution to my email..Please

    Thanks in advance.

    Siva.
    Last edited by jscheuer1; 05-24-2011 at 03:24 PM.

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
  •