Fieldset Contents Overflow in Firefox

fieldset firefox overflow CSS fix

Found solution, add conditional css style:

fieldset {
    display: table-column;
}
<!–[if IE]>
fieldset {
    display: block;
}
<![endif]–>

Fieldset contents overflow in Firefox

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>

How come overflow:hidden works on a div but not a fieldset in firefox?

I guess you must be on Firefox, if it's that so, than it's a bug

Bug 261037 - overflow property not implemented on fieldset

---

Workaround: I nested a div inside the fieldset

Demo

fieldset div {
    overflow: hidden;
    height: 20px;
}

FieldSet CSS Styles not working on Mozilla Firefox

Try this on your Firefox maybe?
Firefox fieldset legend have a bug for a long time, a workaround could be set a margin top for legend and reduce that margin for fieldset.

@-moz-document url-prefix() {
  fieldset {
    margin-top: -0.9em;
  }
  legend.scheduler-border {
    margin-top: 0.9em;
    margin-left: calc(50% - 6.5em);
  }
}

I updated your css with:

  -webkit-box-shadow: 3px 3px 2px #ccc;
  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow: 3px 3px 2px #ccc;
  /* Firefox 3.5 - 3.6 */
  box-shadow: 3px 3px 2px #ccc;
  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
  -webkit-transition: 0.5s;
  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
  transition: 0.5s;
  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */

fieldset.scheduler-border {  border: 1px groove #ddd;  padding: 0 1.4em 1.4em 1.4em;  margin: 0 0 1.5em 0;  -webkit-box-shadow: 3px 3px 2px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */  -moz-box-shadow: 3px 3px 2px #ccc;  /* Firefox 3.5 - 3.6 */  box-shadow: 3px 3px 2px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */  -webkit-transition: 0.5s;  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */  transition: 0.5s;  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */}
fieldset.scheduler-border:hover {  -webkit-box-shadow: 3px 3px 0px transparent  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */  -moz-box-shadow: 3px 3px 0px transparent;  /* Firefox 3.5 - 3.6 */  box-shadow: 3px 3px 0px transparent;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */  -webkit-transition: 0.5s;  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */  transition: 0.5s;  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */}
legend.scheduler-border {  width: auto;  padding: 0px 10px;  border-bottom: none;}
@-moz-document url-prefix() {  fieldset {    margin-top: -0.9em;  }  legend.scheduler-border {    margin-top: 0.9em;    margin-left: calc(50% - 6.5em);  }}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /><div class="text-center">  <fieldset class="scheduler-border">    <legend class="scheduler-border">Contenido de la incidencia</legend>    <div class="radio radio-inline radio-primary">      <input type="radio" name="nQueEs" id="idQueEsQueja" value="queja" defaultChecked/>      <label for="idQueEsQueja">Queja</label>    </div>  </fieldset></div>

Inconsistent flexbox CSS with fieldsets, Firefox vs. Chrome

You may use flex: 1 1 0; (flex: [grow] [shrink] [base];) instead of only flex-grow: 1;, this way you can also remove the min-inline-size.

* {
  box-sizing: border-box;
}
fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
#wrapper {
  max-width: 260px;
}
#padded {
  padding: 0.5rem; 
  background-color: tan;
}
#row {
  display: flex; 
}
#fieldset_field {
  flex: 1 1 0;
}
#field {
  width: 100%;
}
#button {
  margin-left: 0.5rem;
}

<div id="wrapper">
  <p>Clicking button fixes the issue in Firefox. In Chrome, it never even comes up in the first place.</p>
  <div id="padded">
    <div id="row">
      <fieldset id="fieldset_field">
        <input type="text" id="field" />
      </fieldset>
      <fieldset id="fieldset_button">
        <button id="button">Ok</button>
      </fieldset>
    </div>
  </div>
</div>

Printing fieldsets in firefox

As I guessed, it's still broken in the latest Nightly.

You could try to do something similar to IE Print Protector (aka the widely used html5shiv).

http://www.iecss.com/print-protector/#how-it-works

To display elements correctly in print, IE Print Protector temporarily
replaces HTML5 elements with supported fallback elements (like div and
span) when you print. IE Print Protector also creates a special
stylesheet for these elements based on your existing styles; this
means you can safely style HTML5 elements by element name in links,
styles, @imports and @media. Immediately after, IE Print Protector
restores the original HTML5 element to the page, right where you left
it. Any references to those elements and any events on those elements
will remain intact.

Firefox now supports onbeforeprint.

So, when onbeforeprint is fired, you could change the fieldsets for divs, or something.

I'm not sure how viable this is, and it sure sounds complicated.

fieldset in firefox page zoom

Did some digging and found the bug report that describes exactly what you are experiencing. It's 9 years old, so I wouldn't hold your breath for it being fixed anytime soon.

Firefox not respecting overflow: hidden

I was able to fix your JSFiddle by changing the fieldset element to a div or by surrounding the fieldset with a div that had overflow set to hidden. Maybe worth a try. Is the fieldset tag essential to your HTML?

Centering legend in Firefox

This solution uses a Firefox specific selector so we don't need to touch the styling for the other browsers. It uses absolute positioning but uses the transform property to center appropriately.

/* indended styling for other browsers */
fieldset>legend {
  display: table;
  float: none;
  margin: 0 auto;
}

/* FF only */
@media screen and (-moz-images-in-menus: 0) {
  fieldset {
    position: relative;
  }
  fieldset>legend {
    position: absolute;
    left: 50%;
    top: -12px; /* depends on font size and border */
    background: white; /* depends on background */
    transform: translate(-50%, 0);
  }
}

<fieldset>
  <legend>Fix using absolute and transform</legend>
  <p>This seems to work a bit better.</p>
</fieldset>

CSS overflow hidden issue on FireFox

It looks like you're running into https://bugzilla.mozilla.org/show_bug.cgi?id=261037, which is fixed in the upcoming Firefox 28. That's shipping about 5 days from now, so unless you really need this working in old Firefox versions I wouldn't bother with workarounds; just assume it will work.

If you do need to work around, you can try using a nested div inside the fieldset, with height set to 100% and the overflow style on the div.

---

Related Topics