Prevent listbox from resizing horizontally

F

Froefel

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
 
D

dorayme

Froefel said:
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.
 
B

Ben C

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
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.
 
A

Adrienne Boswell

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.
 
B

Beauregard T. Shagnasty

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> ?
 
D

dorayme

"Beauregard T. Shagnasty said:
What is a listbox?


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?
 
D

dorayme

"Beauregard T. Shagnasty said:
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.
 
B

Ben C

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.
 
A

Andrew Bailey

Froefel said:
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
 
J

Jonathan N. Little

Andrew said:
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>
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" ... >
 
D

dorayme

Ben C said:
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)
 
B

Ben C

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.
 
D

dorayme

Ben C said:
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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,769
Messages
2,569,576
Members
45,054
Latest member
LucyCarper

Latest Threads

Top