search

tailwindlabs / headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
https://headlessui.com
MIT License
25.08k stars 1.03k forks source link

[DOCS]: Listbox / Combobox anchor max height #3217

Open pablocdev opened 1 month ago

pablocdev commented 1 month ago

Hi!

I have not found in the documentation a way to limit the max height of the options container, for both the listbox and the combobox components.

Using the developer tools, I discovered the --anchor-max-height variable without a value, and tried to use it the same as the --anchor-gap variable and... it works!

image

I think it would be a good idea to include this in the documentation for both components.

Thanks in advance

scajal commented 4 days ago

This is working, but I'm having an issue with the position of the options. If I limit the anchor height, the div just moves up its position (the top property changes) instead of scrolling (when using the mouse scroll).

scajal commented 4 days ago

This is working, but I'm having an issue with the position of the options. If I limit the anchor height, the div just moves up its position (the top property changes) instead of scrolling (when using the mouse scroll).

Fixed it by removing the anchor property, setting portal to false and managing the position of the div myself.