.responsive-table is not responsive when under a fieldset

[tomyam1]

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

The second table is under a fieldset:

(Chrome 32.0.1700.76)

http://jsfiddle.net/tde5p/

[mdo]

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

[mrtndimitrov]

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

[cvrebert]

The current stable version of Firefox is 28.0.

[mrtndimitrov]

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

[cvrebert]

@mrtndimitrov Your fiddle is using Bootstrap v3.0.3.

[cvrebert]

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

[mrtndimitrov]

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

[timjgleeson]

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.

[mrtndimitrov]

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

[mdo]

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

[mdo]

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

[mdo]

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

[mdo]

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

[lee36656]

NAVER - http://www.naver.com/

lee36656@naver.com 님께 보내신 메일 <Re: [bootstrap] .responsive-table is not responsive when under a fieldset (#12359)> 이 다음과 같은 이유로 전송 실패했습니다.

---

받는 사람이 회원님의 메일을 수신차단 하였습니다.

---

[cvrebert]

Relevant:

• http://stackoverflow.com/questions/1716183/html-fieldset-allows-children-to-expand-indefinitely
• http://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content

[mrtndimitrov]

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

[cvrebert]

Confirmed.
Chrome works fine.

[mdo]

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

[cvrebert]

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

[cvrebert]

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

[mdo]

Gah, that Firefox fix is rough.

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

[cvrebert]

Callout added in:

• abbf6da
• 338cff1

[cvrebert]

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

[cvrebert]

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

Hi Timjgleeson,

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

Thanks!
Sumesh M.S

[mdo]

I can't recall @cvrebert.