:last-child issue with margin-top (Form elements)

[trevorsaint]

Looks good selecting the first item or the second item.

We have an issue when it comes to selecting the last item as shown below:

.form-group .panel-border-narrow:last-child

This includes margin-top of 10px which causes a visual issue as shown above.

How would you expect it to work?

I would not expect the last child in this instance to have a margin top attribute.

We could target .form-group within .form-group.

You can see this here: https://govuk-elements.herokuapp.com/form-elements/example-form-elements/

[mcgoooo]

i believe you need to add padding-top to 0 in here
https://github.com/alphagov/govuk_elements/blob/master/public/sass/elements/_panels.scss#L52

[trevorsaint]

Hi @mcgoooo I'm affraid that won't fix the issue. A little more work is involved to fix this.

[colmjude]

Hi @trevorsaint. To clarify are you saying the issue is the grey and red lines not being the same height?

[trevorsaint]

Hi @colmjude this has nothing to do with the red line.

Please look at the gap from the Monthly radio upto the panel. The gap differs to that of weekly or fortnightly. It's essentially the last child.

https://govuk-elements.herokuapp.com/form-elements/example-form-elements/

Scroll to Your income. Click Weekly, Fortnightly and look at the gap from the radio upto the panel. Now click on the last item Monthly.

Hopefully you can see what I am talking about

Example:

[colmjude]

Thanks for clarifying, that is clear to see.

Looks like it was introduced with this commit e4f47e0 but not fully clear why from the description.