Skip to content

Commit

Permalink
Update checkbox display from block to flex
Browse files Browse the repository at this point in the history
In V5 of the design system, checkboxes use flexbox, `display: flex`.

In the option select component, visibility of the checkbox is set using either `display: none` or `display: block`. Setting the value to `block` caused rendering issues when focusing a checkbox item. Setting the value to `flex` aligns with the approach used in the design system and fixes the rendering issue.
  • Loading branch information
MartinJJones committed Jun 17, 2024
1 parent f9f557f commit 6defcdf
Showing 1 changed file with 1 addition and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
}

for (i = 0; i < showCheckboxes.length; i++) {
obj.$allCheckboxes[showCheckboxes[i]].style.display = 'block'
obj.$allCheckboxes[showCheckboxes[i]].style.display = 'flex'
}

var lenChecked = obj.$optionsContainer.querySelectorAll('.govuk-checkboxes__input:checked').length
Expand Down

0 comments on commit 6defcdf

Please sign in to comment.