Prevent listbox from resizing horizontally

am 28.06.2007 16:52:37 von Froefel

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

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

This makes sure that the listbox is always as wide as its (fixed-
width) , 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

Re: Prevent listbox from resizing horizontally

am 28.06.2007 20:14:15 von dorayme

In article
<1183042357.606730.12700@m36g2000hse.googlegroups.com>,
Froefel wrote:

> I'm looking for a way to restrict a listbox from resizing
> horizontally.
>
> The listbox sits within a and has a style="width=100%;"
>
> This makes sure that the listbox is always as wide as its (fixed-
> width) , 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:

"http://www.w3.org/TR/html4/strict.dtd">

Question

Item short

Item longer

Item that goes on or quite some time, partly being a
history of the world....

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Pellentesque augue.Suspendisse consectetuer ...

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

--
dorayme

Re: Prevent listbox from resizing horizontally

am 28.06.2007 20:18:37 von Ben C

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

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.

Re: Prevent listbox from resizing horizontally

am 28.06.2007 20:39:14 von Adrienne Boswell

Gazing into my crystal ball I observed Froefel
writing in news:1183042357.606730.12700@m36g2000hse.googlegroups.com:

> I'm looking for a way to restrict a listbox from resizing
> horizontally.
>
> The listbox sits within a and has a style="width=100%;"
>
> This makes sure that the listbox is always as wide as its (fixed-
> width) , 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:

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

Re: Prevent listbox from resizing horizontally

am 28.06.2007 20:53:43 von a.nony.mous

dorayme wrote:

> Froefel wrote:
>
>> I'm looking for a way to restrict a listbox from resizing
>> horizontally.
>>
>> The listbox sits within a 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

(a list)
or
? -- -bts -Motorcycles defy gravity; cars just suck </article> <article> <h2>Re: Prevent listbox from resizing horizontally</h2>am 29.06.2007 00:40:16 von dorayme In article <XsTgi.241006$p47.95439@bgtnsc04-news.ops.worldnet.att.net>, "Beauregard T. Shagnasty" <a.nony.mous@example.invalid> wrote: > dorayme wrote: > > > Froefel <hansdeschryver@gmail.com> 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 </article> <article> <h2>Re: Prevent listbox from resizing horizontally</h2>am 29.06.2007 01:09:46 von a.nony.mous dorayme wrote: > <http://tinyurl.com/23fpzb> > > How does IE6 and 7 go on this? Hard to say. ;-) file://localhost/Users/tedkroiter/Sites/droovies/test/tableC ellWidths.html -- -bts -Motorcycles defy gravity; cars just suck </article> <article> <h2>Re: Prevent listbox from resizing horizontally</h2>am 29.06.2007 01:32:24 von dorayme In article <_cXgi.128458$Sa4.47025@bgtnsc05-news.ops.worldnet.att.net>, "Beauregard T. Shagnasty" <a.nony.mous@example.invalid> wrote: > dorayme wrote: > > > <http://tinyurl.com/23fpzb> > > > > How does IE6 and 7 go on this? > > Hard to say. ;-) Try: <http://tinyurl.com/34nojy> -- dorayme </article> <article> <h2>Re: Prevent listbox from resizing horizontally</h2>am 29.06.2007 02:59:58 von a.nony.mous dorayme wrote: > "Beauregard T. Shagnasty" <a.nony.mous@example.invalid> 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 </article> <article> <h2>Re: Prevent listbox from resizing horizontally</h2>am 29.06.2007 04:26:57 von dorayme In article <iQYgi.128684$Sa4.15851@bgtnsc05-news.ops.worldnet.att.net>, "Beauregard T. Shagnasty" <a.nony.mous@example.invalid> wrote: > dorayme wrote: > > > "Beauregard T. Shagnasty" <a.nony.mous@example.invalid> 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 </article> <article> <h2>Re: Prevent listbox from resizing horizontally</h2>am 29.06.2007 09:50:53 von Ben C On 2007-06-28, dorayme <doraymeRidThis@optusnet.com.au> wrote: > In article ><XsTgi.241006$p47.95439@bgtnsc04-news.ops.worldnet.att.net>, > "Beauregard T. Shagnasty" <a.nony.mous@example.invalid> wrote: > >> dorayme wrote: >> >> > Froefel <hansdeschryver@gmail.com> 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. </article> <article> <h2>Re: Prevent listbox from resizing horizontally</h2>am 29.06.2007 10:37:13 von Andrew Bailey "Froefel" <hansdeschryver@gmail.com> wrote in message news:1183042357.606730.12700@m36g2000hse.googlegroups.com... > 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 </article> <article> <h2>Re: Prevent listbox from resizing horizontally</h2>am 29.06.2007 16:25:04 von lws4art Andrew Bailey wrote: > "Froefel" <hansdeschryver@gmail.com> wrote in message > news:1183042357.606730.12700@m36g2000hse.googlegroups.com... >> 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 </article> <article> <h2>Re: Prevent listbox from resizing horizontally</h2>am 30.06.2007 00:44:05 von dorayme In article <slrnf89ecs.8cn.spamspam@bowser.marioworld>, Ben C <spamspam@spam.eggs> wrote: > On 2007-06-28, dorayme <doraymeRidThis@optusnet.com.au> 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 </article> <article> <h2>Re: Prevent listbox from resizing horizontally</h2>am 30.06.2007 10:49:52 von Ben C On 2007-06-29, dorayme <doraymeRidThis@optusnet.com.au> wrote: > In article <slrnf89ecs.8cn.spamspam@bowser.marioworld>, > Ben C <spamspam@spam.eggs> wrote: > >> On 2007-06-28, dorayme <doraymeRidThis@optusnet.com.au> 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. </article> <article> <h2>Re: Prevent listbox from resizing horizontally</h2>am 30.06.2007 13:53:16 von dorayme In article <slrnf8c67g.2lh.spamspam@bowser.marioworld>, Ben C <spamspam@spam.eggs> wrote: > On 2007-06-29, dorayme <doraymeRidThis@optusnet.com.au> wrote: > > In article <slrnf89ecs.8cn.spamspam@bowser.marioworld>, > > Ben C <spamspam@spam.eggs> wrote: > > > >> On 2007-06-28, dorayme <doraymeRidThis@optusnet.com.au> 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 </article> <footer> <a href="/">Index</a> | <a href="/impressum.php">Impressum</a> | <a href="/datenschutz.php">Datenschutz</a> | <a href="https://www.xodox.de/">XODOX</a> </footer> </main> </body> </html>