Clarity: Horizontal and vertical scrollbars appear when dropdowns are used in header-actions

[soumyakantiroychowdhury]

[x ] bug
[ ] feature request
[ ] enhancement

Actual behavior

When dropdowns are used in header-actions, horizontal and vertical scrollbars appear. These scrollbars disappear after clicking on the action button on the header.

Expected behavior

These scrollbars should not appear.

Reproduction of behavior

https://plnkr.co/edit/13kOG9?p=preview

Environment details

• Angular version: 4.0.X

• Clarity version: 0.10.0

• Browser: [ Chrome | Firefox ]

[adityarb88]

@soumyakantiroychowdhury: Could you please try using the *clrIfOpen directive along with the clr-dropdown-menu https://plnkr.co/edit/ifYHb1M4YV83Evrvscbv?p=preview. That should fix the issue. I will still keep this issue open because this is a bug with Clarity UI. We need to mark the dropdown menu as display: none instead of visibility: hidden

[youdz]

display: none won't let the dropdown (or tooltips, which is a better use case) be read inline by screen readers.

What about just making sure position: absolute is always set on the dropdown menu, and keep visibility: hidden? The content would still be read inline by screenreaders, but the positioning would ensure the element is taken out of the flow of the page so we wouldn't have unwanted scrollbars anymore.

[soumyakantiroychowdhury]

Thanks Aditya. Your suggestion worked.

[adityarb88]

@youdz: .dropdown-menu already has position: absolute irrespective of whether its open or not. It still occupies that space as you can see in the screenshot below or if you inspect the plnkr in the issue description :-(

[adityarb88]

Duplicate of #1232. Closing this issue. Please subscribe to #1232 for more updates.

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.