.responsive-table is not responsive when under a fieldset.
The second table is under a fieldset:
It would appear that Chrome and Firefox set min-width: -webkit-min-content; on fieldsets. Will have to override.
Fix #12359: Reset min-width on fieldsets so that they don't break res…
…ponsive tables and behave more like standard block level elements
Setting min-width:0 to fieldset doesn't seem to solve the problem in FF 27.0.1
The current stable version of Firefox is 28.0.
Did you check it with 28.0? The above jsfiddle example still doesn't work. Thanks.
@mrtndimitrov Your fiddle is using Bootstrap v3.0.3.
But I can confirm with Bootstrap v3.1.1 on OS X Firefox v28.0: http://jsfiddle.net/tde5p/5/
I've added inline min-width:0 to fieldset element to test if the problem persists. As you have noticed, it does.
I've encountered this before. Min-width isn't the problem. It's the display attribute that needs to change. If you set it to table-cell, it should work.
@timjgleeson Setting display:table-cell; width: 100% to fieldset element indeed fixes the problem. Thanks.
It would appear that doesn't fix it either: http://jsfiddle.net/tde5p/6/.
(less) Fix #12359: Reset min-width on fieldsets so that they don't br…
…eak responsive tables and behave more like standard block level elements
This was already fixed in v3.1—the original jsfiddle was using v3.0.3 -_-. All set in master.
http://jsfiddle.net/tde5p/10/ with it working fyi.
Associated WebKit bug btw: https://bugs.webkit.org/show_bug.cgi?id=123507.
@mdo In FF 29.01 the last example (http://jsfiddle.net/tde5p/10/) still doesn't work.
Chrome works fine.
I imagine Firefox has it's own bug for this. I can't see anything obvious in their dev tools for this.
The SO threads give the necessary hack to get it working on Firefox.
(And yes, there is a longstanding bug for this: https://bugzilla.mozilla.org/show_bug.cgi?id=504622)
Gah, that Firefox fix is rough.
I've added a callout to the docs to mention this.
Callout added in:
@mdo Could you give your reasoning for not including the Firefox fix in the code itself?
<fieldset> weirdness now documented on MDN as part of bs-css-hacks:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset ("Browser compatibility" & "Bugs" sections)
Thanks for your suggestion - I just added 'display:table-cell;' - It worked!
I can't recall @cvrebert.
AUI-1883 Introduce min-width: 0 in fieldSet. See twbs#12359.