Skip to content
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

"Add Layout" button dropdown cut off by overflow-hidden #537

Open
fritz-c opened this issue Feb 18, 2025 · 0 comments
Open

"Add Layout" button dropdown cut off by overflow-hidden #537

fritz-c opened this issue Feb 18, 2025 · 0 comments

Comments

@fritz-c
Copy link
Contributor

fritz-c commented Feb 18, 2025

This is basically the issue described in #12, just making a comeback. The dropdown triggered by the "Add Button" button gets cut off by some overflow: hidden styling on an element higher up in the html.

Image

Environment:
Nova Version 5.2.4 (latest at the time of writing this)
Chrome (latest version or close to it)

The previous ticket was resolved just by Nova happening to get rid of the overflow: hidden around that time. There are a couple things this library could do in the Vue implementation to get rid of this issue:

  1. Not use an absolute-positioned element for the dropdown. If it just appeared as a static-positioned element, whatever space was required for displaying all the options would be added by virtue of it being in the layout flow. You would lose the ability to pin the dropdown to the top of the button, and you trigger layout shift when showing it, but it would work at least.
  2. Use some library like Popper.js or a vue wrapper of that to manage tethering to the button.
  3. Do a DIY dropdown component that appends the dropdown element to document.body using the Vue built-in Teleport component, and calculating what the positioning should be. That's essentially what a library would do for you, but after accounting for the many edge cases, you can still make it leaner than a library.

In the meantime, I've just got this in the CSS for my Nova admin as a workaround. The 10rem was sufficient for the height of my layout options:

/* Avoid cutting off dropdown selector for Flexible component's "Add Layout" button */
:has(> * > [dusk="toggle-layouts-dropdown-or-add-default"]) {
	min-height: 10rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant