New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

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

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/

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Jan 24, 2014

Member

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

Member

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 closed this in 64e8132 Jan 24, 2014

@mdo mdo referenced this issue Jan 24, 2014

Closed

v3.1.0 ship list #11734

@mrtndimitrov

This comment has been minimized.

Show comment
Hide comment
@mrtndimitrov

mrtndimitrov Mar 28, 2014

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

mrtndimitrov commented Mar 28, 2014

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

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Mar 28, 2014

Member

The current stable version of Firefox is 28.0.

Member

cvrebert commented Mar 28, 2014

The current stable version of Firefox is 28.0.

@mrtndimitrov

This comment has been minimized.

Show comment
Hide comment
@mrtndimitrov

mrtndimitrov Mar 28, 2014

Did you check it with 28.0? The above jsfiddle example still doesn't work. Thanks.

mrtndimitrov commented Mar 28, 2014

Did you check it with 28.0? The above jsfiddle example still doesn't work. Thanks.

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Mar 28, 2014

Member

@mrtndimitrov Your fiddle is using Bootstrap v3.0.3.

Member

cvrebert commented Mar 28, 2014

@mrtndimitrov Your fiddle is using Bootstrap v3.0.3.

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Mar 28, 2014

Member

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

Member

cvrebert commented Mar 28, 2014

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

@mrtndimitrov

This comment has been minimized.

Show comment
Hide comment
@mrtndimitrov

mrtndimitrov 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.

mrtndimitrov commented 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.

@timjgleeson

This comment has been minimized.

Show comment
Hide comment
@timjgleeson

timjgleeson Mar 31, 2014

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 commented Mar 31, 2014

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 milestones: v3.2.0, v3.1.0 Mar 31, 2014

@mrtndimitrov

This comment has been minimized.

Show comment
Hide comment
@mrtndimitrov

mrtndimitrov Mar 31, 2014

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

mrtndimitrov commented Mar 31, 2014

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

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Apr 8, 2014

Member

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

Member

mdo commented Apr 8, 2014

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

stempler pushed a commit to stempler/bootstrap that referenced this issue Apr 11, 2014

(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
@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo May 1, 2014

Member

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

Member

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 milestones: v3.2.0, v3.1.0 May 1, 2014

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo May 1, 2014

Member

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

Member

mdo commented May 1, 2014

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

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo
Member

mdo commented May 1, 2014

@mrtndimitrov

This comment has been minimized.

Show comment
Hide comment
@mrtndimitrov

mrtndimitrov May 13, 2014

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

mrtndimitrov commented May 13, 2014

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

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert May 13, 2014

Member

Confirmed.
Chrome works fine.

Member

cvrebert commented May 13, 2014

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

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo May 14, 2014

Member

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

Member

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.

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert May 14, 2014

Member

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

Member

cvrebert commented May 14, 2014

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

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert May 14, 2014

Member

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

Member

cvrebert commented May 14, 2014

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

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo May 23, 2014

Member

Gah, that Firefox fix is rough.

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

Member

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

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert May 23, 2014

Member

Callout added in:

Member

cvrebert commented May 23, 2014

Callout added in:

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert May 23, 2014

Member

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

Member

cvrebert commented May 23, 2014

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

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Jun 11, 2014

Member

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

Member

cvrebert commented Jun 11, 2014

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

@stormstriker

This comment has been minimized.

Show comment
Hide comment
@stormstriker

stormstriker Jul 22, 2014

Hi Timjgleeson,

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

Thanks!
Sumesh M.S

stormstriker commented Jul 22, 2014

Hi Timjgleeson,

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

Thanks!
Sumesh M.S

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Jul 24, 2014

Member

I can't recall @cvrebert.

Member

mdo commented Jul 24, 2014

I can't recall @cvrebert.

@twbs twbs locked and limited conversation to collaborators Jul 24, 2014

stempler pushed a commit to stempler/bootstrap that referenced this issue Nov 4, 2014

(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

zxdgoal pushed a commit to zxdgoal/alloy-bootstrap that referenced this issue Apr 1, 2015

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.