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
Labels
Milestone

Comments

@tomyam1
Copy link

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

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

@mrtndimitrov 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
Copy link
Collaborator

@cvrebert cvrebert commented Mar 28, 2014

The current stable version of Firefox is 28.0.

@mrtndimitrov
Copy link

@mrtndimitrov mrtndimitrov commented Mar 28, 2014

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

@cvrebert
Copy link
Collaborator

@cvrebert cvrebert commented Mar 28, 2014

@mrtndimitrov Your fiddle is using Bootstrap v3.0.3.

@cvrebert
Copy link
Collaborator

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

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

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

@mrtndimitrov mrtndimitrov commented Mar 31, 2014

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

@mdo
Copy link
Member

@mdo 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 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
Copy link
Member

@mdo mdo commented May 1, 2014

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

@mdo
Copy link
Member

@mdo mdo commented May 1, 2014

@mrtndimitrov
Copy link

@mrtndimitrov mrtndimitrov commented May 13, 2014

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

@cvrebert
Copy link
Collaborator

@cvrebert 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
Copy link
Member

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

@cvrebert cvrebert commented May 14, 2014

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

@cvrebert
Copy link
Collaborator

@cvrebert cvrebert commented May 14, 2014

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

@mdo
Copy link
Member

@mdo 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
Copy link
Collaborator

@cvrebert cvrebert commented May 23, 2014

Callout added in:

@cvrebert
Copy link
Collaborator

@cvrebert cvrebert commented May 23, 2014

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

@cvrebert
Copy link
Collaborator

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

@stormstriker stormstriker commented Jul 22, 2014

Hi Timjgleeson,

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

Thanks!
Sumesh M.S

@mdo
Copy link
Member

@mdo 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
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
7 participants
@mdo @timjgleeson @cvrebert @mrtndimitrov @tomyam1 @stormstriker and others
You can’t perform that action at this time.