Need help to apply style to drop down list

Discussion in 'ASP .Net' started by Hardy Wang, May 3, 2005.

  1. Hardy Wang

    Hardy Wang Guest

    Hi all,
    I have a drop down list with some items, and one of the item contains
    very long text. I want to limit the width of the drop down itself, but when
    I click down arrow to pull down the content, I want to make <option> item
    wide enough to show all characters.

    <html>
    <head>
    <style type="text/css">
    option.wide
    {
    width:auto;
    }
    select
    {
    width:100px;
    }
    </style>
    </head>
    <body>
    <form>
    <select>
    <option>This is red</option>
    <option>This is blue</option>
    <option>This is green</option>
    <option class="wide">This is wide dhf sdlk hsdlh gldh gldek hjldr hldrh
    hdrjh gh gdhg jsdghfaskjg fg f gasfkg</option>
    </select>
    </form>
    </body>
    </html>

    OK, now the problem is, if I apply CSS to <select> object, the width of
    <option> object will be limited too. If I remove CSS for <select>, the whole
    drop down will be very wide.

    Is there a solution?

    Thanks!

    --
    WWW: http://hardywang.1accesshost.com
    ICQ: 3359839
    yours Hardy
    Hardy Wang, May 3, 2005
    #1
    1. Advertising

  2. Hardy Wang

    Bruce Barker Guest

    the browser <select> does not support this. you can write your own select in
    javascript using a, span, a hidden field, an image and a flyout menu. look
    at any of the javascript combo box's for starting code.

    -- bruce (sqlwork.com)

    "Hardy Wang" <> wrote in message
    news:ulagDO$...
    > Hi all,
    > I have a drop down list with some items, and one of the item contains
    > very long text. I want to limit the width of the drop down itself, but
    > when I click down arrow to pull down the content, I want to make <option>
    > item wide enough to show all characters.
    >
    > <html>
    > <head>
    > <style type="text/css">
    > option.wide
    > {
    > width:auto;
    > }
    > select
    > {
    > width:100px;
    > }
    > </style>
    > </head>
    > <body>
    > <form>
    > <select>
    > <option>This is red</option>
    > <option>This is blue</option>
    > <option>This is green</option>
    > <option class="wide">This is wide dhf sdlk hsdlh gldh gldek hjldr hldrh
    > hdrjh gh gdhg jsdghfaskjg fg f gasfkg</option>
    > </select>
    > </form>
    > </body>
    > </html>
    >
    > OK, now the problem is, if I apply CSS to <select> object, the width of
    > <option> object will be limited too. If I remove CSS for <select>, the
    > whole drop down will be very wide.
    >
    > Is there a solution?
    >
    > Thanks!
    >
    > --
    > WWW: http://hardywang.1accesshost.com
    > ICQ: 3359839
    > yours Hardy
    >
    Bruce Barker, May 3, 2005
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. SirPoonga
    Replies:
    2
    Views:
    744
    Ben Strackany
    Jan 7, 2005
  2. weiwei
    Replies:
    0
    Views:
    1,002
    weiwei
    Jan 5, 2007
  3. msimmons
    Replies:
    0
    Views:
    460
    msimmons
    Jul 16, 2009
  4. Replies:
    5
    Views:
    254
  5. Replies:
    3
    Views:
    276
Loading...

Share This Page