Skip to content
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
Closed

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

tomyam1 opened this issue Jan 24, 2014 · 25 comments
Assignees
Milestone

Comments

@tomyam1
Copy link

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
Copy link
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 as completed in 64e8132 Jan 24, 2014
@mdo mdo mentioned this issue Jan 24, 2014
@mrtndimitrov
Copy link

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

@cvrebert
Copy link
Collaborator

The current stable version of Firefox is 28.0.

@mrtndimitrov
Copy link

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

@cvrebert
Copy link
Collaborator

@mrtndimitrov Your fiddle is using Bootstrap v3.0.3.

@cvrebert
Copy link
Collaborator

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
Copy link

I've added inline min-width:0 to fieldset element to test if the problem persists. As you have noticed, it does.

@timjgleeson
Copy link

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
Copy link

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

@mdo
Copy link
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
…t break responsive tables and behave more like standard block level elements
@mdo
Copy link
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 as completed May 1, 2014
@mdo mdo modified the milestones: v3.2.0, v3.1.0 May 1, 2014
@mdo
Copy link
Member

mdo commented May 1, 2014

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

@mdo
Copy link
Member

mdo commented May 1, 2014

Associated WebKit bug btw: https://bugs.webkit.org/show_bug.cgi?id=123507.

@mrtndimitrov
Copy link

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

@cvrebert
Copy link
Collaborator

Confirmed.
Chrome works fine.

@cvrebert cvrebert reopened this May 13, 2014
@cvrebert cvrebert removed this from the v3.1.0 milestone May 13, 2014
@mdo
Copy link
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
Copy link
Collaborator

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

@cvrebert
Copy link
Collaborator

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

@mdo
Copy link
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 as completed May 23, 2014
@mdo mdo added this to the v3.1.0 milestone May 23, 2014
@cvrebert
Copy link
Collaborator

Callout added in:

@cvrebert
Copy link
Collaborator

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

@cvrebert
Copy link
Collaborator

<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
Copy link

Hi Timjgleeson,

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

Thanks!
Sumesh M.S

@mdo
Copy link
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
…t break 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.
Projects
None yet
Development

No branches or pull requests

7 participants
@mdo @timjgleeson @cvrebert @mrtndimitrov @tomyam1 @stormstriker and others