`.responsive-table` is not responsive when under a `fieldset` #12359

Closed
tomyam1 opened this Issue Jan 24, 2014 · 25 comments

Projects

None yet

6 participants

@tomyam1
tomyam1 commented Jan 24, 2014

.responsive-table is not responsive when under a fieldset.

The second table is under a fieldset:

image
(Chrome 32.0.1700.76)

http://jsfiddle.net/tde5p/

Owner
mdo commented Jan 24, 2014

It would appear that Chrome and Firefox set min-width: -webkit-min-content; on fieldsets. Will have to override.

@mdo mdo added a commit that closed this issue Jan 24, 2014
@mdo mdo Fix #12359: Reset min-width on fieldsets so that they don't break res…
…ponsive tables and behave more like standard block level elements
64e8132
@mdo mdo closed this in 64e8132 Jan 24, 2014
@mdo mdo referenced this issue Jan 24, 2014
Closed

v3.1.0 ship list #11734

Setting min-width:0 to fieldset doesn't seem to solve the problem in FF 27.0.1
http://jsfiddle.net/tde5p/4/

Owner

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.

Owner

@mrtndimitrov Your fiddle is using Bootstrap v3.0.3.

Owner

But I can confirm with Bootstrap v3.1.1 on OS X Firefox v28.0: http://jsfiddle.net/tde5p/5/

@cvrebert cvrebert reopened this Mar 28, 2014

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.

@cvrebert cvrebert modified the milestone: v3.2.0, v3.1.0 Mar 31, 2014
@mdo mdo was assigned by cvrebert Mar 31, 2014

@timjgleeson Setting display:table-cell; width: 100% to fieldset element indeed fixes the problem. Thanks.

Owner
mdo commented Apr 8, 2014

It would appear that doesn't fix it either: http://jsfiddle.net/tde5p/6/.

@stempler stempler pushed a commit to stempler/bootstrap that referenced this issue Apr 11, 2014
@mdo mdo (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
f10253b
Owner
mdo commented May 1, 2014

This was already fixed in v3.1—the original jsfiddle was using v3.0.3 -_-. All set in master.

@mdo mdo closed this May 1, 2014
@mdo mdo modified the milestone: v3.2.0, v3.1.0 May 1, 2014
Owner
mdo commented May 1, 2014

http://jsfiddle.net/tde5p/10/ with it working fyi.

Owner
mdo commented May 1, 2014

@mdo In FF 29.01 the last example (http://jsfiddle.net/tde5p/10/) still doesn't work.

Owner

Confirmed.
Chrome works fine.

@cvrebert cvrebert reopened this May 13, 2014
@cvrebert cvrebert removed this from the v3.1.0 milestone May 13, 2014
@cvrebert cvrebert added the confirmed label May 13, 2014
Owner
mdo commented May 14, 2014

I imagine Firefox has it's own bug for this. I can't see anything obvious in their dev tools for this.

Owner

The SO threads give the necessary hack to get it working on Firefox.

Owner

(And yes, there is a longstanding bug for this: https://bugzilla.mozilla.org/show_bug.cgi?id=504622)

Owner
mdo commented May 23, 2014

Gah, that Firefox fix is rough.

I've added a callout to the docs to mention this.

@mdo mdo closed this May 23, 2014
@mdo mdo added this to the v3.1.0 milestone May 23, 2014
Owner

Callout added in:

Owner

@mdo Could you give your reasoning for not including the Firefox fix in the code itself?

Owner

<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)

Hi Timjgleeson,

Thanks for your suggestion - I just added 'display:table-cell;' - It worked!

Thanks!
Sumesh M.S

Owner
mdo commented Jul 24, 2014

I can't recall @cvrebert.

@mdo mdo locked and limited conversation to collaborators Jul 24, 2014
@stempler stempler pushed a commit to stempler/bootstrap that referenced this issue Nov 4, 2014
@mdo mdo (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
3010add
@zxdgoal zxdgoal pushed a commit to zxdgoal/alloy-bootstrap that referenced this issue Apr 1, 2015
zxdgoal AUI-1883 Introduce min-width: 0 in fieldSet. See twbs#12359. 422dc10
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.