10

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.

Here’s a test case. The following expands indefinitely (boo):

<div style="width: 300px; overflow: hidden;">
   <fieldset>
      <div style="overflow: scroll; white-space: nowrap;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem arcu, sodales non gravida eget, vehicula vitae nulla. Quisque turpis justo, consectetur ut egestas at, pulvinar nec diam. Donec porttitor lobortis elit quis scelerisque. Proin at mollis nibh. Nulla nisi dolor, rutrum nec rhoncus congue, cursus at urna. Curabitur adipiscing euismod nisl nec consequat. Aliquam justo justo, bibendum id molestie eget, dignissim sit amet sapien. Phasellus non erat nulla, quis auctor eros. Proin pellentesque turpis eu ipsum venenatis egestas non eget lacus. Vestibulum ante diam, posuere ut fringilla nec, pretium ac metus. Integer laoreet fringilla ipsum, vel interdum urna pellentesque a. Donec lobortis tincidunt nisi, ac tristique massa pretium ac. Ut vel magna erat, et hendrerit sem. Curabitur vulputate, tellus quis pellentesque pretium, felis odio aliquam sapien, sit amet hendrerit arcu orci ut nulla. Vestibulum suscipit rhoncus arcu, ut aliquam eros sagittis a. Suspendisse eros elit, bibendum venenatis pulvinar at, scelerisque vel quam. 
      </div>
   </fieldset>
</div>

But if you use a div, it works as expected (hurray!):

<div style="width: 300px; overflow: hidden;">
   <div>
      <div style="overflow: scroll; white-space: nowrap;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem arcu, sodales non gravida eget, vehicula vitae nulla. Quisque turpis justo, consectetur ut egestas at, pulvinar nec diam. Donec porttitor lobortis elit quis scelerisque. Proin at mollis nibh. Nulla nisi dolor, rutrum nec rhoncus congue, cursus at urna. Curabitur adipiscing euismod nisl nec consequat. Aliquam justo justo, bibendum id molestie eget, dignissim sit amet sapien. Phasellus non erat nulla, quis auctor eros. Proin pellentesque turpis eu ipsum venenatis egestas non eget lacus. Vestibulum ante diam, posuere ut fringilla nec, pretium ac metus. Integer laoreet fringilla ipsum, vel interdum urna pellentesque a. Donec lobortis tincidunt nisi, ac tristique massa pretium ac. Ut vel magna erat, et hendrerit sem. Curabitur vulputate, tellus quis pellentesque pretium, felis odio aliquam sapien, sit amet hendrerit arcu orci ut nulla. Vestibulum suscipit rhoncus arcu, ut aliquam eros sagittis a. Suspendisse eros elit, bibendum venenatis pulvinar at, scelerisque vel quam. 
      </div>
   </div>
</div>

How can I get the fieldset to behave like the div?

Rory O'Kane
  • 29,210
  • 11
  • 96
  • 131
Stephen Sorensen
  • 11,455
  • 13
  • 33
  • 46
  • 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. – Stephen Sorensen Nov 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? – Upgradingdave Nov 11 '09 at 16:39

5 Answers5

13

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.

Putting it all together:

fieldset { min-width: 0; }

/* FF hack; not needed for newer versions */
@-moz-document url-prefix() { /* Only target Gecko. (Breaks layout in IE.) */
    fieldset { display: table-cell; }
}

jsFiddle demo.

Update (25 Sept 2017)

The [Firefox bug][bug] that necessitated the display: table-cell hack has been fixed now; if you are targetting newer versions of Firefox, you may omit that and just use min-width: 0. (Thanks @Nikolay for the reminder!)

For more details on why that used to be needed, my answer to a related question has a fuller explanation, including the gory browser internals.

Jordan Gray
  • 16,306
  • 3
  • 53
  • 69
  • It works! I don't like the accepted answer... And who cares if it breaks layout in IE? – Jonathan Simas Jan 26 '17 at 20:43
  • 1
    As noted in the other answer, as of 2017-09, Firefox 53+ doesn't need the `display:table-cell` bit; the `min-width:0` override is sufficient and doesn't break IE11. – Nickolay May 11 '18 at 12:33
0

I'm not sure if you want that, but this is working : 

<div style="width: 300px; overflow: auto;">
   <fieldset>
      <div style="overflow: auto; white-space: nowrap;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem arcu, sodales non gravida eget, vehicula vitae nulla. Quisque turpis justo, consectetur ut egestas at, pulvinar nec diam. Donec porttitor lobortis elit quis scelerisque. Proin at mollis nibh. Nulla nisi dolor, rutrum nec rhoncus congue, cursus at urna. Curabitur adipiscing euismod nisl nec consequat. Aliquam justo justo, bibendum id molestie eget, dignissim sit amet sapien. Phasellus non erat nulla, quis auctor eros. Proin pellentesque turpis eu ipsum venenatis egestas non eget lacus. Vestibulum ante diam, posuere ut fringilla nec, pretium ac metus. Integer laoreet fringilla ipsum, vel interdum urna pellentesque a. Donec lobortis tincidunt nisi, ac tristique massa pretium ac. Ut vel magna erat, et hendrerit sem. Curabitur vulputate, tellus quis pellentesque pretium, felis odio aliquam sapien, sit amet hendrerit arcu orci ut nulla. Vestibulum suscipit rhoncus arcu, ut aliquam eros sagittis a. Suspendisse eros elit, bibendum venenatis pulvinar at, scelerisque vel quam. 
      </div>
   </fieldset>
</div>

You can remove the root div too, and it'll still work.

Soufiane Hassou
  • 17,257
  • 2
  • 39
  • 75
  • '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. – Stephen Sorensen Nov 11 '09 at 16:13
  • I edited my code, changed overflow:hidden; to overflow:auto; is this helping ? – Soufiane Hassou Nov 11 '09 at 16:14
  • Is this: http://i29.tinypic.com/2hzi83q.png the kind of problem you're talking about? – Franz Nov 11 '09 at 16:17
  • "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... – Stephen Sorensen Nov 11 '09 at 16:22
  • What's bugging me in your code is that you're using overflow without a fixed width, I don't know what do you intend to do with that. – Soufiane Hassou Nov 11 '09 at 16:25
  • 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. – Stephen Sorensen Nov 11 '09 at 16:38
0

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.

Stephen Sorensen
  • 11,455
  • 13
  • 33
  • 46
0

Is this what you're after?

<div style="overflow: auto; width: 300px; height: 55px;">
   <fieldset style="overflow: scroll; width: 100%; white-space: nowrap;">
      <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem arcu, sodales non gravida eget, vehicula vitae nulla. Quisque turpis justo, consectetur ut egestas at, pulvinar nec diam. Donec porttitor lobortis elit quis scelerisque. Proin at mollis nibh. Nulla nisi dolor, rutrum nec rhoncus congue, cursus at urna. Curabitur adipiscing euismod nisl nec consequat. Aliquam justo justo, bibendum id molestie eget, dignissim sit amet sapien. Phasellus non erat nulla, quis auctor eros. Proin pellentesque turpis eu ipsum venenatis egestas non eget lacus. Vestibulum ante diam, posuere ut fringilla nec, pretium ac metus. Integer laoreet fringilla ipsum, vel interdum urna pellentesque a. Donec lobortis tincidunt nisi, ac tristique massa pretium ac. Ut vel magna erat, et hendrerit sem. Curabitur vulputate, tellus quis pellentesque pretium, felis odio aliquam sapien, sit amet hendrerit arcu orci ut nulla. Vestibulum suscipit rhoncus arcu, ut aliquam eros sagittis a. Suspendisse eros elit, bibendum venenatis pulvinar at, scelerisque vel quam. 
      </div>
   </fieldset>
</div>
Danny
  • 63
  • 6
  • 1
    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? – Stephen Sorensen Dec 02 '09 at 14:50
-1

remember

position:absolute will not work with display:table cell That's what i have when try to debug the flex layout

so just keep in mind of it

Faris Rayhan
  • 4,500
  • 1
  • 22
  • 19