search

tailwindlabs / headlessui

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

Use `var(--anchor-max-height)` when using the `anchor` prop #3148

Closed RobinMalfait closed 5 months ago

RobinMalfait commented 5 months ago

When using the anchor prop, we try to position the anchored element within the viewport. We use the size middleware of Floating UI to ensure we are working in a constrained max-width and max-height.

However, if you want to limit the height of let's say a ComboboxOptions then you instinctively add max-h-60 for example. The problem is that the max-height set by Floating UI will win because it's inline styles.

You could use !max-h-60 which makes it !important, but then you can run into an issue where the max height set by the user is larger than the available space which results in combobox options that are unavailable.

To solve this, we want best of both worlds by ensuring we prefer the size from the user, but constrain it with the value we know.

We now read from a var(--anchor-max-height) variable where you can set your own preferred max height.

E.g.:

<Combobox>
  <ComboboxInput />
  <ComboboxOptions anchor="bottom start" className="[--anchor-gap:var(--spacing-4)] [--anchor-max-height:var(--spacing-60)]">
    <ComboboxOption>Option 1</ComboboxOption>
    <ComboboxOption>Option 2</ComboboxOption>
    <ComboboxOption>Option 3</ComboboxOption>
  </ComboboxOptions>
</Combobox>
vercel[bot] commented 5 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
headlessui-react ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 26, 2024 10:17pm
headlessui-vue ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 26, 2024 10:17pm