Issue with Nova Forms containing `overflow-hidden`

[robmellett]

Nova Version: #.#.

laravel/nova  4.32.6 

Description:

Nova Forms contain a overflow-hidden css class that breaks overflowing content from select drop down menus.

This issue appears to be different from the following issues.

• https://github.com/laravel/nova-issues/issues/5874
• https://github.com/laravel/nova-issues/issues/6040

Detailed steps to reproduce the issue on a fresh Nova installation:

The Nova container containing the line class="relative overflow-hidden bg-white dark:bg-gray-800 rounded-lg shadow divide-y divide-gray-100 dark:divide-gray-700".

When it has the class overflow-hidden it causes problems for one of our drop down components. Is there a way to revert or remove this class from nova please?

Example with the issue

Example when the overflow-hidden is removed

[ralphschindler]

I can confirm this is also an issue when using nova-flexible-content when you attempt to bring up a dev based select near the bottom of the form.

[davidhemphill]

I couldn't replicate this issue on the latest versions of Nova. We had a recent update that addressed this for Nova's internal components that seems to have done the trick, but third-party selects (like the one you appear to be using) may need to be similarly updated.

If you can prove this is replicable on the latest default version of Nova using it's built-in fields, I'll reopen and investigate!

[ralphschindler]

@davidhemphill regarding the built-in fields, is your solution to teleport the overlay div outside of the <div class="relative overflow-hidden .."> node? If so, it is going to be hard to replicate that kind of solution in 3rd party Nova Fields that use 3rd party Vue component since typically you may not be able to get ahold of all the div/nodes that need to be teleported.

In the case above (and also my library nova-select-plus), I leverage vue-select https://vue-select.org/api/slots.html to produce a specialized kind of select field. As you can imagine, I won't be able to teleport the vue-select overlay because I don't have control over its rendering of the overlay, and the whole input can't be teleported.

Out of curiosity, what value is overflow-hidden providing in that Card? Does making that div overflow visible break anything in Nova?

[emarshall87]

This issue is also affecting the use of position: sticky on any children elements within the overflow: hidden container. It's quite difficult to replicate the smooth native css ability of sticky. An overflow: clip instead would solve my particular issue with sticky.

[olieady]

Can confirm our WYSIWYG editor's toolbar is no longer sticking to the top of the page for ease-of-use because of this update.

Not sure why overflow-hidden is used here?