[DOCS]: Listbox / Combobox anchor max height

[pablocdev]

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!

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

Thanks in advance

[scajal]

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]

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.

[0xernesto]

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!

Thanks for pointing this out. I spent way too much time trying to figure this out. Here is what I ended up doing:

<ListboxOptions
            anchor={{
              to: "bottom end",
              gap: 8,
              offset: 0,
              padding: 0,
            }}
            className="z-50 w-fit overflow-auto rounded-lg p-1 text-sm outline-none [--anchor-max-height:15rem]"
          >

[scajal]

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!

Thanks for pointing this out. I spent way too much time trying to figure this out. Here is what I ended up doing:

<ListboxOptions
            anchor={{
              to: "bottom end",
              gap: 8,
              offset: 0,
              padding: 0,
            }}
            className="z-50 w-fit overflow-auto rounded-lg p-1 text-sm outline-none [--anchor-max-height:15rem]"
          >

Thanks @0xernesto. I finally solved it using the following for the height:

<ListboxOptions
    portal={false}
    anchor="bottom"
    className="!max-h-72 (...rest of classes)"
>