search

htmlstreamofficial / preline

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
https://preline.co
Other
4.9k stars 309 forks source link

Advanced Select: Force dropdown options position #489

Open x9sim9 opened 3 weeks ago

x9sim9 commented 3 weeks ago

Summary

When clicking an advanced select have option for always_below or always_above

Detailed Description

When using advanced select, if there is more visible space above the select box than below the select box will show the options above the select box. This has the issue of blocking the label for the select in some circumstances, so its better to have the ability to set an option that sets the select options to always appear below even if its slightly off screen for specific use cases.

Use Cases

If the label is directly above the select box avoid blocking the label by showing the options below.

Root-acess commented 2 weeks ago

Suggestion Add an option for always_below or always_above in the advanced select component.

Detailed Description
Currently, the advanced select component automatically determines whether to display options above or below the select box based on available space. However, in cases where the options appear above, it can obstruct the label placed directly above the select box, creating usability issues. This feature would allow developers to set the options dropdown to always appear below (or above), even if it might slightly overflow off-screen.

Use Case
In forms where labels are placed directly above the select component, this feature would prevent the dropdown options from blocking the label, improving clarity and user experience.