HTML <select> different width when expanded

Discussion in 'HTML' started by lambertb@gmail.com, Sep 18, 2006.

  1. Guest

    , Sep 18, 2006
    #1
    1. Advertising

  2. Benjamin Niemann, Sep 18, 2006
    #2
    1. Advertising

  3. On Mon, 18 Sep 2006 13:53:50 -0700, let this slip:

    > Hi, is this possible to achieve this, and how?
    > http://img217.imageshack.us/img217/779/derrrvw2.png
    >
    > thanks!


    Have you ever seen this kind of behaviour in an application ? I don't
    think this is possible in HTML, and if it was, I imagine it to be
    difficult to implement - especially in browsers that use the native
    widgets to draw form elements, like IE, Konqueror or Safari.

    Thomas Jollans
     
    Thomas Jollans, Sep 18, 2006
    #3
  4. Jonathan N. Little, Sep 18, 2006
    #4
  5. Guest

    Hi,

    I'd need this because the image I provided is just for sample. My
    select contains fairly large strings, and I don't have enough space on
    my page to set the width of my select wide enough to see all text. So I
    was wondering if even the select element is somewhat small, it was
    possible to at least expand the box to a width so we see all text in
    the box that shows all elements when we click on the select.

    Jonathan N. Little wrote:
    > wrote:
    > > Hi, is this possible to achieve this, and how?
    > > http://img217.imageshack.us/img217/779/derrrvw2.png

    >
    > WHY?
    >
    > Well your could...
    >
    > SELECT { width: 10em; }
    > SELECT OPTION { width: 20em; }
    >
    > But don't expect it to work in IE!
    >
    > --
    > Take care,
    >
    > Jonathan
    > -------------------
    > LITTLE WORKS STUDIO
    > http://www.LittleWorksStudio.com
     
    , Sep 18, 2006
    #5
  6. Darin McGrew Guest

    wrote:
    >>> Hi, is this possible to achieve this, and how?
    >>> http://img217.imageshack.us/img217/779/derrrvw2.png


    wrote:
    > I'd need this because the image I provided is just for sample. My
    > select contains fairly large strings, and I don't have enough space on
    > my page to set the width of my select wide enough to see all text. So I
    > was wondering if even the select element is somewhat small, it was
    > possible to at least expand the box to a width so we see all text in
    > the box that shows all elements when we click on the select.


    It sounds to me like a SELECT element isn't the most appropriate choice.
    Have you considered radio buttons or checkboxes, which would allow label
    text that could wrap to multiple lines as necessary?
    --
    Darin McGrew, , http://www.rahul.net/mcgrew/
    Web Design Group, , http://www.HTMLHelp.com/

    "FAILURE IS NOT AN OPTION. It comes bundled with the software."
     
    Darin McGrew, Sep 19, 2006
    #6
  7. Guest

    no, really, select is the correct choice, believe me

    Darin McGrew wrote:
    > wrote:
    > >>> Hi, is this possible to achieve this, and how?
    > >>> http://img217.imageshack.us/img217/779/derrrvw2.png

    >
    > wrote:
    > > I'd need this because the image I provided is just for sample. My
    > > select contains fairly large strings, and I don't have enough space on
    > > my page to set the width of my select wide enough to see all text. So I
    > > was wondering if even the select element is somewhat small, it was
    > > possible to at least expand the box to a width so we see all text in
    > > the box that shows all elements when we click on the select.

    >
    > It sounds to me like a SELECT element isn't the most appropriate choice.
    > Have you considered radio buttons or checkboxes, which would allow label
    > text that could wrap to multiple lines as necessary?
    > --
    > Darin McGrew, , http://www.rahul.net/mcgrew/
    > Web Design Group, , http://www.HTMLHelp.com/
    >
    > "FAILURE IS NOT AN OPTION. It comes bundled with the software."
     
    , Sep 19, 2006
    #7
  8. Hello,

    wrote:
    > Darin McGrew wrote:
    >> wrote:
    >> >>> Hi, is this possible to achieve this, and how?
    >> >>> http://img217.imageshack.us/img217/779/derrrvw2.png

    >>
    >> wrote:
    >> > I'd need this because the image I provided is just for sample. My
    >> > select contains fairly large strings, and I don't have enough space on
    >> > my page to set the width of my select wide enough to see all text.


    You need a larger monitor. ;)

    >> > So I
    >> > was wondering if even the select element is somewhat small, it was
    >> > possible to at least expand the box to a width so we see all text in
    >> > the box that shows all elements when we click on the select.


    But the text will be cropped, when the SELECT is not expanded, and the user
    has to click on it, in order to read it - not a good idea.

    >> It sounds to me like a SELECT element isn't the most appropriate choice.
    >> Have you considered radio buttons or checkboxes, which would allow label
    >> text that could wrap to multiple lines as necessary?

    >
    > no, really, select is the correct choice, believe me


    Unless you provide more context, we have to guess and rely on our
    experiences. And this experience tells us that in 99.9% the question is
    not "How do I implement XYZ?", but "How do I construct a document so I
    don't have to do XYZ?".

    To me, this sounds like your layout is much too rigid, and you are suffering
    from the consequences of this approach. You can't control how large the
    browser window, font size, ... is anyway. If there is enough space to have
    the (wide) select and submit button side-by-side, fine. When there is not
    enough horizontal space, nobody gets hurt, if the submit button is placed
    below the select and the user has to scroll a bit in order to see the
    complete document (which is less efford than clicking on the select
    control(s) in order to see which option is active).


    HTH

    --
    Benjamin Niemann
    Email: pink at odahoda dot de
    WWW: http://pink.odahoda.de/
     
    Benjamin Niemann, Sep 19, 2006
    #8
  9. BlueBonzoid

    Joined:
    Feb 12, 2010
    Messages:
    1
    IE6 Solution for Full-Length Option Displays

    This is a bit late, but there are still large groups of people stuck with IE6. Our particular outfit has over 250,000 people - and no I'm not going to yell at our CEO demanding an upgrade.

    This solution is sub-optimal in that it hides the drop-down graphic for really long option tags, making the select look more like a textbox. But that doesn't keep the drop-down from working. The instant a user clicks on the field, the full-length dropdown appears. It also requires no javascript and only a tiny bit of CSS. This was developed using IE6. Enjoy!

    Code:
    <html>  
    <head>  
    <title>IE6 Hack Full-Length Option Displays</title>  
    </head>  
    <body>  
      <table >
        <tr>  
          <td><div  style="width: 100px; overflow: hidden; display: inline;">
            <select id=shortselect>  
              <option value="1" title="Test# 1">Test# 11111111111111111111111</option>  
              <option value="2" title="Test# 2">Test# 2222222222222222222222222222222222</option>  
              <option value="3" title="Test# 3">Test# 3333333333333333333</option>  
              <option value="4" title="Test# 4">Test# 4444444444444444444444444</option>  
              <option value="5" title="Test# 5">Test# 555555555555555</option>  
            </select>
            </div>
          </td>
          <td>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam massa felis, posuere nec, interdum non, fermentum vel, pede. Nam consectetuer massa vitae urna. Morbi sit amet justo. Morbi a tellus. [and other stuff]
          </td>
        </tr>  
        <tr>
          <td colspan="2">
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer ligula risus, vehicula sit amet, molestie id, ullamcorper non, nisl. Fusce ullamcorper massa nec urna. Duis condimentum. Vivamus et enim at nibh sodales feugiat. In hac habitasse platea dictumst. [and so on]
          </td>
        </tr>
      </table>  
    </body>  
    </html> 
     
    BlueBonzoid, Feb 12, 2010
    #9
    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. AndrewF
    Replies:
    1
    Views:
    784
    Bruce Barker
    Oct 10, 2005
  2. qwweeeit
    Replies:
    2
    Views:
    650
    qwweeeit
    Dec 14, 2005
  3. ton
    Replies:
    2
    Views:
    2,160
  4. vunet
    Replies:
    1
    Views:
    149
    vunet
    Jan 23, 2008
  5. SamuelXiao
    Replies:
    5
    Views:
    280
    Thomas 'PointedEars' Lahn
    Jan 6, 2010
Loading...

Share This Page