4

I am having a css issue with fieldset and wonder if you could help?

I have a fieldset with width smaller than its content div's width.

I want the fieldset to display a horizontal scroll bar as the content is too wide but it only works in IE's not Firefox.

Thanks in advance.

Eric

This is the html

<fieldset style=" width:150px; overflow:scroll;" >
    <div style="width:200px; height:50px; background:red;">
        Contents...
    </div>
</fieldset>
  • Related question with a very detailed answer: https://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content – Denilson Sá Maia Feb 02 '17 at 20:31

4 Answers4

6

The best thing I can come up with is to put 2 nested divs within the fieldset:

<fieldset style="width:150px" >
    <div style="width: 150px; overflow-x:scroll;">
        <div style="width:200px; height:50px; background:red;">
            Contents...
        </div>
    </div>
</fieldset>
Elias Zamaria
  • 96,623
  • 33
  • 114
  • 148
0

As others have already mentioned, this is a bug in Firefox: Bug 261037 - overflow property not implemented on fieldset (reported in 2004, and still not fixed)

Community
  • 1
  • 1
Denilson Sá Maia
  • 47,466
  • 33
  • 109
  • 111
0

I had the same problem. FF does not allow overflow: hidden on fieldset tags regardless if you use overflow-y or overflow-x. My fix was using '-moz-hidden-unscrollable'. Like this...

fieldset{
    overflow: -moz-hidden-unscrollable;
}

It is a dirty hack but it works.

re: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#Values

max kaplan
  • 541
  • 4
  • 13
0

Try this:

<fieldset style=" width:150px;">
    <div style="width:200px; height:50px; background:red; overflow:scroll;">
        Contents...
    </div>
</fieldset>
Gabriel McAdams
  • 56,921
  • 12
  • 61
  • 77