Form group has unnecessary float?

[andysellick]

govuk_elements/assets/sass/elements/_panels.scss

Line 35 in 69070e6

.form-group .panel-border-narrow {

The .form-group class has float:left, width:100% on it, which is causing an issue in the Child Benefit Tax Calculator (we're currently converting it to use Elements). We have a .form-group element immediately followed by another div, which has an id on it used by a jump link in the event of an error condition. Since the .form-group element isn't clearfixed, the next div renders part way through it, rather than after it, so the jump link doesn't appear to quite go to the right position on the page.

Removing the float and width from .form-group fixes this problem, but I want to check our use of Elements is correct before accusing anyone of an actual bug - if there's a general clearfix class I could just apply that to the .form-group to also solve the problem, or is it that .form-group should always be inside something else?

This isn't live yet so I can't link to it, but here's an annotated screenshot. The dashed red border shows the boundary of the following div, showing that the .form-group above it is floated over it.

[selfthinker]

This is a duplicate of #257.

[andysellick]

Thanks. Looks like there hasn't been any movement on this for a while. Anyone I should chase on this, or is there a workaround? e.g. generic clearfix class?

[gemmaleigh]

Hi @andysellick @selfthinker,

.form-group uses the %contain-floats placeholder from the govuk_frontend_toolkit: https://github.com/alphagov/govuk_elements/blob/master/assets/sass/elements/_forms.scss#L56

https://github.com/alphagov/govuk_frontend_toolkit/blob/e03e7f56e1b70194310ee970a3ccf00bd9376b36/stylesheets/_shims.scss#L38

That should be clearing each .form-group wrapper.

I'm the person you should chase, sorry for the slow reply. Feel free to open a PR to fix!

[selfthinker]

The %contain-floats would only clear floats within the wrapper, not when the same wrapper itself is floating.

[andysellick]

Thanks both. I've managed to solve the problem (accidentally) by reworking the markup, but if I have time will do a PR.

[andysellick]

Looks like this has been fixed... #487 ...thanks @gemmaleigh!