vanilla-framework icon indicating copy to clipboard operation
vanilla-framework copied to clipboard
verified publisher icon canonical

Add support for scrollable dropdowns

Open huwshimi opened this issue 2 years ago • 3 comments

Pattern to amend

  • Contextual menu
  • Search and filter
  • Any other dropdowns

Visual

Screenshot 2023-08-29 at 12 31 09 pm

Screen Recording 2023-03-20 at 4 27 18 pm

Context

Dropdowns that don't fit on the screen can break the layout (this is especially an issue for the application layout in combination with React portals). This can be fixed by adjusting the dropdown to scroll instead of overflowing the screen, however this is a fix that requires JavaScript to implement.

To support this a max-height is calculated and also a min-height is applied as well as overflow: auto.

The implementation for the search and filter and contextual menu dropdowns can be seen here:

  • https://github.com/canonical/react-components/pull/906
  • https://github.com/canonical/react-components/pull/961

From this comment: https://github.com/canonical/react-components/pull/961#issuecomment-1697397844 it would be good to provide some level of support for this in Vanilla so that it doesn't get broken if these components are updated.

huwshimi avatar Aug 30 '23 00:08 huwshimi

WG: we validate the issue. @bartaz to investigate whether should apply to all of Vanilla or just react.

danielmutis avatar Jan 24 '24 10:01 danielmutis

Triage: this was addressed in React already. Likely no need to fix it in current Vanilla CSS codebase. To be taken into consideration while migrating components to new architecture.

bartaz avatar Sep 24 '24 08:09 bartaz

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-15238.

This message was autogenerated

syncronize-issues-to-jira[bot] avatar Sep 24 '24 08:09 syncronize-issues-to-jira[bot]