Use var(--anchor-max-height) when using the anchor prop
#3148
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.:
```ts
<Combobox>
<ComboboxInput />
<ComboboxOptions anchor="bottom start" className="[--anchor-gap:var(--spacing-4)] [--anchor-max-height:var(--spacing-60)]">
…
</ComboboxOptions>
</Combobox>
```
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
reinink
approved these changes
Apr 29, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
When using the
anchorprop, 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 constrainedmax-widthandmax-height.However, if you want to limit the height of let's say a
ComboboxOptionsthen you instinctively addmax-h-60for example. The problem is that themax-heightset by Floating UI will win because it's inline styles.You could use
!max-h-60which 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.: