Fieldset Firefox Overflow CSS Fix

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>

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>

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;
}

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?

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>

Overflow CSS not working with firefox

Finally I managed to solve it by combining the overflow with a fixed position.
And when I did that it affects the width also so (i don't really know why also)

.test {
overflow-y: hidden;
position: fixed;
width: 100%;
}

But I still dont understand why this happend

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.

CSS 'top' in fieldset behaves differently in chrome and firefox

It seems this is an actual Firefox bug:

https://bugzilla.mozilla.org/show_bug.cgi?id=942341

A workaround would be to wrap the fieldset with a div and to apply the CSS rule "position: relative" to the wrapper div instead of the fieldset.

fieldset {

  border: none;

}

.wrap {

  position: relative;

}

.abs {

  position: absolute;

  top: 0;

  right: 0;

}

<div class="wrap">

<fieldset>

  <legend>Legend</legend>

  <div class="abs">X</div>

</fieldset>

</div>

Cross-browser issue with HTML p-element and fieldset-element, bug or intended, how to handle?

I think what you're referring to might be the default margin of <p>. If you inspect the <p> tag you can see the margins on either side:

Also note that the margin on the top is being applied not to <p> itself to one of its ancestors, this is called margin collapsing.

References

• CSS 2.1 Spec - Collapsing margins

---

Related Topics