Need a refresher on overflow

[tryin_to_learn]

I need a refresher on basic CSS. I have this "not staying within the box" problem in quite a few places in my application - not always on select boxes but other places, too: overflowIssue.gif

How do I fix this with CSS? I know we can limit the amount of text we allow them to enter and/or we can chop off the amount we display - but is there a way to use CSS to keep content like this within the form and/or window? I've tried giving the select box a specific width, giving the options a specific width, using overflow:auto, using position:relative on the select box - even played around a bit with word-wrap options but none of those things have helped. I can post code if necessary but I'm really looking for the general answer first. Since this is happening in several places, there's obviously some fundamental something that I'm missing.

[chris.upjohn]

The only true way to stop this from happening is to set a max-width which will prevent the issue overall, of course you will need to add it to every element that has this issue but it is bulletproof.

[tryin_to_learn]

Thanks. That was probably the magic bullet I was looking for. There are still issues, though. On the example above, I put a max-width on both the select box and the options. It definitely did fix the overflow issue but the text of the longer options gets cut off. Does that issue have to be addressed with Javascript or is there something I can do with that via CSS? Like, is there any way to get the text in an option to wrap? Anyway to add some right padding so that longer text doesn't butt right up to the edge of the select box?

longOptionsIssue.png


Just occurred to me maybe I can put the option text in spans and play with it that way. I'll try that.

[tryin_to_learn]

I'm back to square #1 because I just figured out that an option element can't have any child elements - thus no spans inside my option tags. So I need help with the questions above:

1. Is there any way to get the text in an option to wrap as opposed to getting cut off?
2. Is there any way to add some right padding to an option so that longer text doesn't butt right up to the edge of the select box?

[ralph.m]

an option element can't have any child elements

You can, however, group them in optgroup tags: http://reference.sitepoint.com/html/optgroup

May not help you here, but worth knowing.

[tryin_to_learn]

optgroup is a good idea and one I hadn't thought of. I've been experimenting with adding styles to the optgroup and have discovered something I don't get. Actually, this is happening with or without styles and even with or without the optgroup. Check the two screenshots below. In the top one, notice how the Catatonic listing runs off the right edge of the box. That's what I'm trying to prevent. However, if you notice the one the cursor is highlighting - the "Ulcer" one - you can see that the width of each of the options does NOT extend to the edge. To illustrate this even better, the bottom screenshot shows what happens when you hover over Catatonic: it clips off the characters to the width of the option. What's happening here? If the width of the option is only "x", why is the text extending beyond that unless you hover over it? And how do I fix it?

optgroupPadding.png