Keep hidden components hidden#1889
Conversation
Browsers by default will hide any element with a `hidden` attribute using `display: none`. However if you set a different `display` property on a class then the item will no longer be hidden even if the attribute is set. This updates our CSS so that we don't set a display property on components which have a hidden attribute. This is mainly useful for any pages using JavaScript to dynamically show or hide elements.
| // Hide hidden button groups | ||
| .nhsuk-button-group[hidden] { | ||
| display: none; | ||
| } |
There was a problem hiding this comment.
This would ideally be a :not([hidden]) suffix in the css below, but that doesn't work for some Sass reason to do with the other nested selectors.
|
Thanks @frankieroberto, this is great 🙌 We need to take care when it comes to specificity as
The latter is only on From our Slack chat, I wonder if your 
|
|
@colinrotherham ah! I’m now thinking that a global |
|
Switched to a global |
|
|
|
||
| // Add shadow to bottom of header when open | ||
| &:has(.nhsuk-header__menu-list:not([hidden])) { | ||
| &:has(.nhsuk-header__menu-list) { |
There was a problem hiding this comment.
This is drawing a grey border below the menu even when it's closed, sorry 😣
2 participants
Browsers by default will hide any element with a
hiddenattribute usingdisplay: none.However if you set a different
displayproperty on a class then the item will no longer be hidden even if the attribute is set.This updates our CSS so that we don't set a display property on components which have a hidden attribute.
This is mainly useful for any pages using JavaScript to dynamically show or hide elements.
Also adds a test page with all the components hidden.