I want to put a scrollable box inside of a fieldset, but I’ve run into a quirk and I can’t figure out my way around it. When you put your scrollable div inside of a fieldset, the fieldset expands instead of making the scrollable element scroll.

P.S. I know I can fix it by putting a static width on the scrollable element, but I absolutely don't want to do that so please don't suggest it.
–
spudlyNov 11 '09 at 16:06

Do you have to use a fieldset? If all you need is something that looks like a fieldset, mabye just use a div like your second code snippet (since that's working) and add a border to make it look like a fieldset?
–
Dave ParoulekNov 11 '09 at 16:39

5 Answers
5

WebKit and Firefox constrain fieldsets to have an "implicit" width based on the computed width of their contents. Here's how to override it in each.

WebKit makes it relatively easy. This behaviour is defined in the default stylesheet, so you can override it by specifying min-width: 0 for the fieldset.

Firefox is a tougher nut because fieldset width constraints are enforced deep in the Gecko layout code. Fortunately, there is a workaround: add a Gecko-only rule to set the display property for the fieldset to a value corresponding to one of several internal table elements.

'fraid not. I have no control over the outer div. What I need to do is have the fieldset take up the full width of the outer div regardless of the actual width of that outer div.
–
spudlyNov 11 '09 at 16:13

"I have no control over the outer div." Also, I don't want the outer div to scroll when it's contents are too big. Franz: not sure what problem you're talking about, but I don't see a single scrollbar in that pic so I'm guessing not...
–
spudlyNov 11 '09 at 16:22

1

That's the point. I want the fieldset to behave like the div does in my example, and I want to do it without setting a fixed width on the inner div or fieldset.
–
spudlyNov 11 '09 at 16:38

There appears to be no viable solution to this problem. If you really want a fieldset you can use a div and then style it to look like a fieldset but you'll run into tons of cross-browser issues and headaches. Best solution: refactor the form so that you're not using fieldsets anymore.

Not quite. The solution you provide adds a scrollbar both to the outer div and to the fieldset. I only want the div inside of the fieldset to scroll. Did you test your solution?
–
spudlyDec 2 '09 at 14:50