<fieldset> does not obey grid #21666

Open
fisharebest opened this Issue Jan 11, 2017 · 4 comments

Projects

None yet

5 participants

@fisharebest
fisharebest commented Jan 11, 2017 edited

See https://v4-alpha.getbootstrap.com/components/forms/#using-the-grid

The <fieldset> and <legend> contains grid markup that should align the radio buttons with the text inputs and checkbox.

However, the contents of <fieldset class="form-group row">, (<legend class="col-form-legend col-sm-2"> and <div class="col-sm-10">), are stacked vertically rather than horizontally.

screen shot 2017-01-11 at 20 04 13

@nthorpe
nthorpe commented Jan 12, 2017

We're also having trouble with this. Flexbox doesn't work on fieldsets in Chrome
https://bugs.chromium.org/p/chromium/issues/detail?id=375693

@cvrebert
Member

This is Flexbug 9: https://github.com/philipwalton/flexbugs/blob/master/README.md#9-some-html-elements-cant-be-flex-containers
We can't really do anything about this. It's perhaps worth mentioning in the docs though.

@mdo
Member
mdo commented Jan 21, 2017

Oof, definitely worth mentioning in the docs. We'll likely use the workaround for that bug (wrapping the contents of the <fieldset> in a <div>.

@mdo mdo added this to the v4.0.0-beta milestone Jan 21, 2017
@fisharebest

(wrapping the contents of the <fieldset> in a <div>

This breaks HTML validation, as <legend> needs to be the first child of a <fieldset>.
https://developer.mozilla.org/en/docs/Web/HTML/Element/legend

But if this is the best workaround we have, then we have little choice.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment