Prevent listbox from resizing horizontally

Discussion in 'HTML' started by Froefel, Jun 28, 2007.

  1. Froefel

    Froefel Guest

    I'm looking for a way to restrict a listbox from resizing
    horizontally.

    The listbox sits within a <td> and has a style="width=100%;"

    This makes sure that the listbox is always as wide as its (fixed-
    width) <td>, nomatter how short the text of the items.
    However, when the text of an item is longer than the listbox width,
    the listbox is resized horizontally to accommodate the text. I would
    like to prevent that from happening, so that either the text gets cut
    off, or a horizontal scroll bar appears.

    Can this be done with CSS or any other way?

    -- Hans
    Froefel, Jun 28, 2007
    #1
    1. Advertising

  2. Froefel

    dorayme Guest

    In article
    <>,
    Froefel <> wrote:

    > I'm looking for a way to restrict a listbox from resizing
    > horizontally.
    >
    > The listbox sits within a <td> and has a style="width=100%;"
    >
    > This makes sure that the listbox is always as wide as its (fixed-
    > width) <td>, nomatter how short the text of the items.
    > However, when the text of an item is longer than the listbox width,
    > the listbox is resized horizontally to accommodate the text. I would
    > like to prevent that from happening, so that either the text gets cut
    > off, or a horizontal scroll bar appears.
    >
    > Can this be done with CSS or any other way?
    >



    Your meaning is not clear. Show a URL of what you are trying.
    Most people don't like code - but you don't even give this. What
    can "text of an item is longer than the listbox width" mean? Text
    wraps. Anyway, of all my browsers, interestingly enough, iCab is
    odd man out in rendering:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Question</title>
    <style type="text/css">
    * {margin: 0; padding: 0;}
    ..listContainer {width: 600px; border: 1px solid #000; padding:
    2px; padding-left: 2em;}
    ul {width: 100%; border: 1px solid #c00;"}
    </style>
    </head>
    <body>
    <table><tr><td class="listContainer"><ul>
    <li>Item short</li>
    <li>Item longer</li>
    <li>Item that goes on or quite some time, partly being a
    history of the world....</li>
    </ul></td>
    <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Pellentesque augue.Suspendisse consectetuer ...</td></tr></table>
    </body>
    </html>

    by taking to heart and seriously the 600px width of the cell.
    Horizontal scroll bars come up.

    --
    dorayme
    dorayme, Jun 28, 2007
    #2
    1. Advertising

  3. Froefel

    Ben C Guest

    On 2007-06-28, Froefel <> wrote:
    > I'm looking for a way to restrict a listbox from resizing
    > horizontally.
    >
    > The listbox sits within a <td> and has a style="width=100%;"
    >
    > This makes sure that the listbox is always as wide as its (fixed-
    > width) <td>, nomatter how short the text of the items.


    style="width=100%" is incorrect syntax, it should be "width: 100%". But
    it doesn't matter, because the width of the <li> should be the full
    available width anyway (assuming you haven't floated it or anything).

    > However, when the text of an item is longer than the listbox width,
    > the listbox is resized horizontally to accommodate the text. I would
    > like to prevent that from happening, so that either the text gets cut
    > off, or a horizontal scroll bar appears.
    >
    > Can this be done with CSS or any other way?


    Something has to determine that width-- you talk about the text being
    longer than the "listbox width" but that width is a function of many
    things, including the text, and probably other features of the table.

    Post a URL because it's not clear what the exact problem is.
    Ben C, Jun 28, 2007
    #3
  4. Gazing into my crystal ball I observed Froefel <>
    writing in news::

    > I'm looking for a way to restrict a listbox from resizing
    > horizontally.
    >
    > The listbox sits within a <td> and has a style="width=100%;"
    >
    > This makes sure that the listbox is always as wide as its (fixed-
    > width) <td>, nomatter how short the text of the items.
    > However, when the text of an item is longer than the listbox width,
    > the listbox is resized horizontally to accommodate the text. I would
    > like to prevent that from happening, so that either the text gets cut
    > off, or a horizontal scroll bar appears.
    >
    > Can this be done with CSS or any other way?
    >
    > -- Hans
    >


    I am assuming this is in a form, eg:
    <select name="listbox">
    <option value="1">Short</option>
    <option value="2">Supercalifragilisticexpialidocious</option>
    </select>

    You could try overflow on it, but, you have to consider the user. Does
    the user need to see the whole word?

    As others have said, a URL would help.

    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
    Adrienne Boswell, Jun 28, 2007
    #4
  5. dorayme wrote:

    > Froefel <> wrote:
    >
    >> I'm looking for a way to restrict a listbox from resizing
    >> horizontally.
    >>
    >> The listbox sits within a <td> and has a style="width=100%;"


    What is a listbox?

    > Your meaning is not clear. Show a URL of what you are trying.


    Certainly would help. Does he mean
    <ul><li> (a list)
    or
    <select><option value=... (a 'dropdown' or 'combobox')
    or maybe even a
    <textarea> ?

    --
    -bts
    -Motorcycles defy gravity; cars just suck
    Beauregard T. Shagnasty, Jun 28, 2007
    #5
  6. Froefel

    dorayme Guest

    In article
    <XsTgi.241006$>,
    "Beauregard T. Shagnasty" <> wrote:

    > dorayme wrote:
    >
    > > Froefel <> wrote:
    > >
    > >> I'm looking for a way to restrict a listbox from resizing
    > >> horizontally.
    > >>
    > >> The listbox sits within a <td> and has a style="width=100%;"

    >
    > What is a listbox?
    >
    > > Your meaning is not clear. Show a URL of what you are trying.

    >
    > Certainly would help. Does he mean ...


    Whatever he means, it made me aware (or more aware, I clean
    forget) of an interesting difference between iCab and the other
    browsers I have, at least in respect to the page code I gave.
    Basically, it seems, iCab respects fixed width of table cells to
    the extent of throwing up a scroll bar rather than shortening the
    width even when there is plenty room to do so. This point does
    not need lists so I removed from previous code:

    <http://tinyurl.com/23fpzb>

    How does IE6 and 7 go on this?

    --
    dorayme
    dorayme, Jun 28, 2007
    #6
  7. dorayme wrote:

    > <http://tinyurl.com/23fpzb>
    >
    > How does IE6 and 7 go on this?


    Hard to say. ;-)

    file://localhost/Users/tedkroiter/Sites/droovies/test/tableCellWidths.html

    --
    -bts
    -Motorcycles defy gravity; cars just suck
    Beauregard T. Shagnasty, Jun 29, 2007
    #7
  8. Froefel

    dorayme Guest

    In article
    <_cXgi.128458$>,
    "Beauregard T. Shagnasty" <> wrote:

    > dorayme wrote:
    >
    > > <http://tinyurl.com/23fpzb>
    > >
    > > How does IE6 and 7 go on this?

    >
    > Hard to say. ;-)


    Try:

    <http://tinyurl.com/34nojy>

    --
    dorayme
    dorayme, Jun 29, 2007
    #8
  9. dorayme wrote:

    > "Beauregard T. Shagnasty" <> wrote:
    >> dorayme wrote:
    >>
    >>> <http://tinyurl.com/23fpzb>
    >>>
    >>> How does IE6 and 7 go on this?

    >>
    >> Hard to say. ;-)

    >
    > Try:
    >
    > <http://tinyurl.com/34nojy>


    Well, that is cute, but we still don't know what a listbox is... :)

    --
    -bts
    -Motorcycles defy gravity; cars just suck
    Beauregard T. Shagnasty, Jun 29, 2007
    #9
  10. Froefel

    dorayme Guest

    In article
    <iQYgi.128684$>,
    "Beauregard T. Shagnasty" <> wrote:

    > dorayme wrote:
    >
    > > "Beauregard T. Shagnasty" <> wrote:
    > >> dorayme wrote:
    > >>
    > >>> <http://tinyurl.com/23fpzb>
    > >>>
    > >>> How does IE6 and 7 go on this?
    > >>
    > >> Hard to say. ;-)

    > >
    > > Try:
    > >
    > > <http://tinyurl.com/34nojy>

    >
    > Well, that is cute, but we still don't know what a listbox is... :)


    No, we don't. But if OP is expecting things to behave as in iCab
    rather than FF in regard to fixed width cells and their contents,
    it might be of some benefit to see how different browsers treat
    fixed width cells.

    --
    dorayme
    dorayme, Jun 29, 2007
    #10
  11. Froefel

    Ben C Guest

    On 2007-06-28, dorayme <> wrote:
    > In article
    ><XsTgi.241006$>,
    > "Beauregard T. Shagnasty" <> wrote:
    >
    >> dorayme wrote:
    >>
    >> > Froefel <> wrote:
    >> >
    >> >> I'm looking for a way to restrict a listbox from resizing
    >> >> horizontally.
    >> >>
    >> >> The listbox sits within a <td> and has a style="width=100%;"

    >>
    >> What is a listbox?
    >>
    >> > Your meaning is not clear. Show a URL of what you are trying.

    >>
    >> Certainly would help. Does he mean ...

    >
    > Whatever he means, it made me aware (or more aware, I clean
    > forget) of an interesting difference between iCab and the other
    > browsers I have, at least in respect to the page code I gave.
    > Basically, it seems, iCab respects fixed width of table cells to
    > the extent of throwing up a scroll bar rather than shortening the
    > width even when there is plenty room to do so. This point does
    > not need lists so I removed from previous code:
    >
    > <http://tinyurl.com/34nojy>


    Do you mean when the viewport is narrowed to about 400px you get a
    horizontal scrollbar for the whole page? I think they all do that.

    Where you do get some variable mileage is with this kind of thing:

    td { background-color: pink; }

    <table>
    <tr>
    <td>
    dihydromethylcarboxythializinone
    </td>
    <td>
    <div style="width: 20px; overflow: scroll">
    dihydromethylcarboxythializinone
    </div>
    </td>
    <td>
    <div style="width: 20px">
    dihydromethylcarboxythializinone
    </div>
    </td>
    </tr>
    </table>

    Each cell contains a long and unbreakable word, much wider than the
    space available. But how wide should the <td> be? Everyone makes the
    first cell wide enough for the text (i.e. much more than 20px). Opera
    distinguishes between cases 2 and 3-- it seems to pay attention to the
    value of overflow on the div.

    As for the third cell, Opera treats it like the first, but FF and
    Konqueror both make it 20px wide.

    What's supposed to happen? I don't think I've ever found either of the
    second two cases explained in a specification.

    They all seem to make a real mess of the scrollbar. I can't actually
    scroll to see the rest of the word in any of them.
    Ben C, Jun 29, 2007
    #11
  12. "Froefel" <> wrote in message
    news:...
    > I'm looking for a way to restrict a listbox from resizing
    > horizontally.
    >
    > The listbox sits within a <td> and has a style="width=100%;"
    >
    > This makes sure that the listbox is always as wide as its (fixed-
    > width) <td>, nomatter how short the text of the items.
    > However, when the text of an item is longer than the listbox width,
    > the listbox is resized horizontally to accommodate the text. I would
    > like to prevent that from happening, so that either the text gets cut
    > off, or a horizontal scroll bar appears.
    >
    > Can this be done with CSS or any other way?
    >
    > -- Hans
    >


    Hi Hans,

    If you mean...

    <select........>
    <option........>
    <option........>
    </select>

    (I believe they're called either "dropdown menus" or "combo boxes")....

    then you are on the right track by using "style" to force a width. You
    mention that the containing <td> has a fixed width, why don't you try adding
    that width to the "style" option instead of 100%?

    <select style="width: 300" .......>

    Hope this helps

    Andy
    Andrew Bailey, Jun 29, 2007
    #12
  13. Andrew Bailey wrote:
    > "Froefel" <> wrote in message
    > news:...
    >> I'm looking for a way to restrict a listbox from resizing
    >> horizontally.
    >>
    >> The listbox sits within a <td> and has a style="width=100%;"
    >>
    >> This makes sure that the listbox is always as wide as its (fixed-
    >> width) <td>, nomatter how short the text of the items.
    >> However, when the text of an item is longer than the listbox width,
    >> the listbox is resized horizontally to accommodate the text. I would
    >> like to prevent that from happening, so that either the text gets cut
    >> off, or a horizontal scroll bar appears.
    >>
    >> Can this be done with CSS or any other way?
    >>
    >> -- Hans
    >>

    >
    > Hi Hans,
    >
    > If you mean...
    >
    > <select........>
    > <option........>
    > <option........>
    > </select>
    >
    > (I believe they're called either "dropdown menus" or "combo boxes")....


    There is no "combobox" in HTML, but requires the pairing of a text
    input with a select element and some JavaScript....but using the size
    attribute will give you the traditional listbox

    <select size="5">
    <option>Apple</option>
    <option>Peach</option>
    <option>Pear</option>
    <option>Pineapple</option>
    <option>Orange</option>
    <option>Blueberries</option>
    <option>Raspberries</option>
    <option>Gooseberries</option>
    <option>Grapes</option>
    </select>


    >
    > then you are on the right track by using "style" to force a width. You
    > mention that the containing <td> has a fixed width, why don't you try adding
    > that width to the "style" option instead of 100%?
    >
    > <select style="width: 300" .......>


    Well, no this in incorrect the width property would require the units.

    <select style="width: 300px" ... >

    or better:

    <select style="width: 30em" ... >

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jun 29, 2007
    #13
  14. Froefel

    dorayme Guest

    In article <>,
    Ben C <> wrote:

    > On 2007-06-28, dorayme <> wrote:
    > >
    > > <http://tinyurl.com/34nojy>

    >
    > Do you mean when the viewport is narrowed to about 400px you get a
    > horizontal scrollbar for the whole page?


    No, I mean simply that no horizontal bars appear in Safari, FF,
    Opera and some other browsers when the browser window width has
    run out of room to show the 600px that is specified for that
    first cell. Whereas iCab says, "There's no room left to get the
    600px in and the other right cell, so I will provide a scrollbar"

    Please tell me if this is not so on your versions of FF, Opera,
    etc. (I realise you might not have iCab)

    I do not yet know what the situation is re this url on WinIE.
    (because I am lazy to fire up my winbox just for this little
    thing)

    >I think they all do that. ("when the viewport is narrowed to

    about 400px you get a horizontal scrollbar")
    >


    Well, not on my browsers. FF is happily able to go down to about
    50px wide (and, interestingly much less, but I leave this detail
    to another time!) and show no scrollbars, ditto Opera.

    Safari has a bigger limit of window size, about 300px but even at
    the limit, no scrollbars at all. Mac IE is similar to Safari in
    this respect.

    iCab stands alone on my machine in this respect. It shows
    scrollbars in response to the code of the url above as described.

    I will take a look at what you have said about a different markup
    (snipped here)

    --
    dorayme
    dorayme, Jun 29, 2007
    #14
  15. Froefel

    Ben C Guest

    On 2007-06-29, dorayme <> wrote:
    > In article <>,
    > Ben C <> wrote:
    >
    >> On 2007-06-28, dorayme <> wrote:
    >> >
    >> > <http://tinyurl.com/34nojy>

    >>
    >> Do you mean when the viewport is narrowed to about 400px you get a
    >> horizontal scrollbar for the whole page?

    >
    > No, I mean simply that no horizontal bars appear in Safari, FF,
    > Opera and some other browsers when the browser window width has
    > run out of room to show the 600px that is specified for that
    > first cell. Whereas iCab says, "There's no room left to get the
    > 600px in and the other right cell, so I will provide a scrollbar"
    >
    > Please tell me if this is not so on your versions of FF, Opera,
    > etc. (I realise you might not have iCab)


    No you're right again, and I must stop talking such rubbish.

    Yes, to confirm this, if you set a width of 600px on one cell you
    effectively set the "preferred" width of that cell, which contributes to
    the preferred width of the whole table. But the actual width the table
    will get is a compromise between its preferred width, the available
    width, and its content minimum width. If available is less than
    preferred, then that 600px cell will have to shrink a bit.

    If you put a verylongwordwithnospaces in that cell, you will find that
    it will not shrink to smaller than the space needed for the word, and at
    that point you will get a horizontal scrollbar.

    This is what FF, Opera, Konqueror all do, but you're saying not iCab,
    which treats the 600px effectively as a minimum width as well as as a
    preferred width-- it treats that cell exactly as though it contained a
    long unbreakable word that required a 600px wide cell.

    If however you set style=width: 600px on the _table_ rather than on one
    of the <td>s, it will get at least 600px and so you'll get a horizontal
    scrollbar when you make the browser window narrower, even when there's
    nothing much in the cells.

    [...]
    > iCab stands alone on my machine in this respect. It shows
    > scrollbars in response to the code of the url above as described.


    None of this is really specified in much detail, but CSS 2.1 has a
    "non-normative" section (17.5.2) on automatic table layout which says:

    2. For each column, determine a maximum and minimum column width
    from the cells that span only that column. The minimum is that
    required by the cell with the largest minimum cell width (or the
    column 'width', whichever is larger). The maximum is that
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    required by the cell with the largest maximum cell width (or the
    column 'width', whichever is larger).

    The bit I've "underlined" justifies what iCab is doing, but it's not
    what anyone else does.
    Ben C, Jun 30, 2007
    #15
  16. Froefel

    dorayme Guest

    In article <>,
    Ben C <> wrote:

    > On 2007-06-29, dorayme <> wrote:
    > > In article <>,
    > > Ben C <> wrote:
    > >
    > >> On 2007-06-28, dorayme <> wrote:
    > >> >
    > >> > <http://tinyurl.com/34nojy>
    > >>
    > >> Do you mean when the viewport is narrowed to about 400px you get a
    > >> horizontal scrollbar for the whole page?

    > >
    > > No, I mean simply that no horizontal bars appear in Safari, FF,
    > > Opera and some other browsers when the browser window width has
    > > run out of room to show the 600px that is specified for that
    > > first cell. Whereas iCab says, "There's no room left to get the
    > > 600px in and the other right cell, so I will provide a scrollbar"
    > >
    > > Please tell me if this is not so on your versions of FF, Opera,
    > > etc. (I realise you might not have iCab)

    >
    > No you're right again, ...
    >
    > Yes, to confirm this, if you set a width of 600px on one cell you
    > effectively set the "preferred" width of that cell, which contributes to
    > the preferred width of the whole table. But the actual width the table
    > will get is a compromise between its preferred width, the available
    > width, and its content minimum width. If available is less than
    > preferred, then that 600px cell will have to shrink a bit.
    >
    > If you put a verylongwordwithnospaces in that cell, you will find that
    > it will not shrink to smaller than the space needed for the word, and at
    > that point you will get a horizontal scrollbar.
    >
    > This is what FF, Opera, Konqueror all do, but you're saying not iCab,
    > which treats the 600px effectively as a minimum width as well as as a
    > preferred width-- it treats that cell exactly as though it contained a
    > long unbreakable word that required a 600px wide cell.


    Yes. That is a good way of putting it. You can see the difference
    between iCab and the other browsers on this by simply putting in
    a very long unbreakable word and making the text real small so
    that there is plenty of room for the word and spare in the first
    left cell. If you alter the browser window width, iCab behaves
    differently to other browsers; it behaves like the other browsers
    when the word fills the cell and springs the scroll bars at the
    slightest threat to the width. Now when you start increasing the
    text size to when it fills the width, iCab seems, of course, to
    behave the same as the other browsers (but only because it is
    operating on the width of the cell anyway, whereas the other
    browsers are operating on the content - these being the same in
    this special circumstance)
    >
    > If however you set style=width: 600px on the _table_ rather than on one
    > of the <td>s, it will get at least 600px and so you'll get a horizontal
    > scrollbar when you make the browser window narrower, even when there's
    > nothing much in the cells.
    >


    Now on _this_ variation, iCab behaves as the other browsers (ie
    on table width set)

    > [...]
    > > iCab stands alone on my machine in this respect. It shows
    > > scrollbars in response to the code of the url above as described.

    >
    > None of this is really specified in much detail, but CSS 2.1 has a
    > "non-normative" section (17.5.2) on automatic table layout which says:
    >
    > 2. For each column, determine a maximum and minimum column width
    > from the cells that span only that column. The minimum is that
    > required by the cell with the largest minimum cell width (or the
    > column 'width', whichever is larger). The maximum is that
    > ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    > required by the cell with the largest maximum cell width (or the
    > column 'width', whichever is larger).
    >
    > The bit I've "underlined" justifies what iCab is doing, but it's not
    > what anyone else does.


    Now that is interesting. If it is non-normative, it sounds like
    iCab is the strictly correct one... But anyway, these are the
    realities. I still don't know or can't remember how IE behaves in
    all of this. To tell you the truth, I dislike setting widths to
    table cells or even tables. I prefer to let the table work its
    magic on the content and it mostly does an excellent natural job.
    So I don't store up knowledge about all this width stuff.

    --
    dorayme
    dorayme, Jun 30, 2007
    #16
    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. Dominik Jain
    Replies:
    9
    Views:
    8,496
    Dominik Jain
    Aug 4, 2005
  2. Eric Wong

    Prevent Tkinter Canvas from resizing

    Eric Wong, Jan 20, 2006, in forum: Python
    Replies:
    1
    Views:
    1,226
    Fredrik Lundh
    Jan 20, 2006
  3. Michael

    How to prevent Resizing of <TD>

    Michael, Dec 4, 2006, in forum: ASP General
    Replies:
    2
    Views:
    138
    Michael
    Dec 5, 2006
  4. Pil (Trustworthy from Experience)

    Resizing a div by resizing its borders

    Pil (Trustworthy from Experience), Apr 18, 2009, in forum: Javascript
    Replies:
    9
    Views:
    340
    Proper
    Apr 21, 2009
  5. Proper
    Replies:
    0
    Views:
    191
    Proper
    Apr 18, 2009
Loading...

Share This Page