-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Use var(--anchor-max-height)
when using the anchor
prop
#3148
Merged
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
This was referenced May 28, 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
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 constrainedmax-width
andmax-height
.However, if you want to limit the height of let's say a
ComboboxOptions
then you instinctively addmax-h-60
for example. The problem is that themax-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.: