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

[css-display-3] grid/flex layout support for <fieldset> #321

Closed
gl3bl opened this Issue Jul 14, 2016 · 6 comments

Comments

Projects
None yet
6 participants
@gl3bl
Copy link

commented Jul 14, 2016

I’m investigating an interop issue with grid/flex layout for <fieldset>. As you can see from the table below the grid/flex layout support of <fieldset> varies a lot between browsers. Only Firefox and IE 11 handle <fieldset> with display: flex.

Test case: http://codepen.io/anon/pen/MaYBoX
or a shorter version:

<fieldset style="display: flex">
    <legend>Legend</legend>
    <div>These fields</div>
    <div> shouldn't be</div>
    <div>stacked vertically</div>
</fieldset>
Browser Test result Bug tracking link
Firefox 47 👍 fixed
Chrome 51 open
IE 11 👍
Edge open

It’s interesting that Edge removed <fieldset>’s flex layout support that was supported in IE11. May be someone from Microsoft can share some insights about this decision.

According to http://www.w3.org/TR/CSS21/visuren.html#display-prop the display property “Applies to: all elements”.

Can we decide whether 'display' property should have rendering effect on <fieldset>.

@gl3bl

This comment has been minimized.

Copy link
Author

commented Jul 14, 2016

@tabatkins

This comment has been minimized.

Copy link
Member

commented Jul 14, 2016

There's nothing magical about <fieldset> per spec - it should just be a block normally, and accept other display values like everything else does.

In practice, it's magic in ways that are completely unexplained in CSS, and we haven't wanted to generalize that magic so we've never really tried to explain it.

@bfgeek

This comment has been minimized.

Copy link

commented Jul 18, 2016

@gregwhitworth Do you have an idea/insight as to why IE->Edge changed behaviour here?

dstockwell pushed a commit to dstockwell/chromium that referenced this issue Aug 2, 2016

glebl Commit bot
Add grid/flex layout support for <fieldset>
This adds grid/flex layout support for <fieldset> by
introducing an anonymous inner block that is used to
layout fieldset's underlying blocks without interfering
with the special paint flow used to render <legend>
element.

W3C/CSS WG discussion:
w3c/csswg-drafts#321

Testing:
- All affected tests' results were verified to make sure
that there are no differences in pixel test results between
old and new version of LayoutFieldSet.
- 2 more tests were added
(fieldset-display-{flex|grid}.html)
- verified interoperability of fieldset(display: flex)
with Firefox(one of 2 browsers that support fieldset's flex
layout)

BUG=262679,375693
TEST=fast/forms/fieldset/fieldset-display-flex.html;
fast/forms/fieldset/fieldset-display-grid.html

Review-Url: https://codereview.chromium.org/2150003005
Cr-Commit-Position: refs/heads/master@{#409303}

dstockwell pushed a commit to dstockwell/chromium that referenced this issue Aug 31, 2016

glebl Commit bot
Add grid/flex layout support for <fieldset>
This adds grid/flex layout support for <fieldset> by
introducing an anonymous inner block that is used to
layout fieldset's underlying blocks without interfering
with the special paint flow used to render <legend>
element.

This is the updated version of http://crrev.com/2150003005 that passes failed ClusterFuzz tests.

W3C/CSS WG discussion:
w3c/csswg-drafts#321

Testing:
- All affected tests' results were verified to make sure
that there are no differences in pixel test results between
old and new version of LayoutFieldSet.
- 2 more tests were added
(fieldset-display-{flex|grid}.html)
- verified interoperability of fieldset(display: flex)
with Firefox(one of 2 browsers that support fieldset's flex
layout)

BUG=262679,375693
TEST=fast/forms/fieldset/fieldset-display-flex.html;
fast/forms/fieldset/fieldset-display-grid.html

Committed: https://crrev.com/c6d69f896f406c9a7801b29cb8c02a88e5b01770
Cr-Commit-Position: refs/heads/master@{#409303}

patch from issue 2150003005 at patchset 290001 (http://crrev.com/2150003005#ps290001)

Review-Url: https://codereview.chromium.org/2215133005
Cr-Commit-Position: refs/heads/master@{#415577}
@gregwhitworth

This comment has been minimized.

Copy link
Contributor

commented Sep 13, 2016

hmmm, odd. I don't know off hand; I'll need to dig through our changes to figure out where this changed and why.

@fantasai

This comment has been minimized.

Copy link
Collaborator

commented Feb 14, 2017

Closing as invalid, as this isn't a spec issue and @gregwhitworth hasn't come up with a reason for it to become one...

@botmad

This comment has been minimized.

Copy link

commented Dec 6, 2018

amazing component but inability to flex the fieldset is upsetting indeed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.