.form-group has float and width 100%

[trevorsaint]

Can someone please explain to me why we are using:

.form-group {
   float: left
   width: 100%
}

There is no requirement for this in how it is being used and it would need clearing? I think I vaguely remember this being mentioned a long time ago and cannot remember the reason why we have it. I would love a reminder as to why.

[gemmaleigh]

Hi Trevor,

The width is being set as there are a number of .form-control-width classes that define a percentage width for form elements.

For the percentage width to be calculated properly, I believe the parent element has to have 100% width.

It is cleared by the first line @extend %contain-floats;.

// Form group is used to wrap label and input pairs
.form-group {
  @extend %contain-floats;
  @include box-sizing(border-box);

  float: left;
  width: 100%;
  .. 
}

A better solution would probably be to remove the width from here and to rely on the grid, so that each form element fills 100% with of the parent grid item (and that is then used to constrain the width of anything inside it).

I'll look into this later this week.

[trevorsaint]

Hi Gemma.

I think in general the float and width is not required on .form-group. Therefore you don't need any clearing methods.

I see it only being needed for dates (.form-group-day, .form-group-month, .form-group-year) where the form groups sit side-by-side.

In this instance you would only need the clearing on the .form-date wrapper. Leaving the float and width only on the (.form-group-day, .form-group-month, .form-group-year) but not on the global .form-group.

I hope this makes sense. I look forward to seeing your solution :).

[selfthinker]

For what it's worth, I've seen that weird combination of float and 100% width on a lot of websites over the last few years. I never understood why so many devs are doing that, though. I always imagined there might be a bad but popular tutorial out there which tells people to do it for reason X.