`display: flex;` doesn't work in <fieldset>

RESOLVED DUPLICATE of bug 1230207

Status

()

Core
Layout
RESOLVED DUPLICATE of bug 1230207
3 years ago
2 years ago

People

(Reporter: Tae, Unassigned)

Tracking

Trunk
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

3 years ago
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:31.0) Gecko/20100101 Firefox/31.0 (Beta/Release)
Build ID: 20140716183446

Steps to reproduce:

<fieldset style="display: flex; flex-direction: row;">
    <input type="radio"/><!-- They can be other elements, like labels -->
    <input type="radio"/>
</fieldset>


Actual results:

Radio buttons appear one above the other.


Expected results:

Radio buttons should appear side by side.
This is fundamentally the same issue as bug 984869.  And as there, there's no actual spec for how <fieldset> should work.  :(

Daniel, how insane would it be to set up the fieldset's anonymous block as a display:flex when the fieldset itself has that display type?  We could probably do the same for buttons too...
Component: General → Layout
That could probably work.

The most straightforward thing to do would be to make the fieldset's anonymous block inherit its "display" property (and blockify it, perhaps via ApplyStyleFixups, if there's no better place to do it).

We'd just need to be sure to forcibly inherit the flex-container-specific properties (flex-wrap, align-content, etc) to the anonymous block inside the fieldset / button.  We'd need to do the same for the grid properties and table properties, and those of any other container-type that we want to work on a <fieldset>/<button> (targeting its content area), too...
OS: Mac OS X → All
Hardware: x86 → All
See Also: → bug 984869
Version: 31 Branch → Trunk

Comment 3

3 years ago
The linked bug 984869 is incorrectly marked as "Resolved: Invalid". The WHATWG HTML doesn't say that `button` element can't have `display` values other than `inline-block`, it just says that the default display of the button in CSS-supporting browsers must be `inline-block`. It would be nice to fix both these bugs with one patch, since they look similar.

Comment 4

2 years ago
Blink bug:
https://code.google.com/p/chromium/issues/detail?id=375693

WebKit bug:
https://bugs.webkit.org/show_bug.cgi?id=148826

This is fixed in EdgeHTML.

Updated

2 years ago
Status: UNCONFIRMED → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 1230207
You need to log in before you can comment on or make changes to this bug.