Z-index incompatibility with the most recent version of Laravel Nova

[antennaio]

First things first, thanks for this wonderful package!

I would like to report a z-index related incompatibility with the latest version of Laravel Nova (v4.29.5).

Release notes for Laravel Nova v4.29.5 mention Fixed some more issues with z-index stacking.

A screenshot explains it in the best way:

[ralphschindler]

I have this problem as well.

[Senexis]

Encountered this is as well.

Potentially useful to add: Instead of having to do with z-index, it seems to have to do with the addition of .overflow-hidden on cards.

[toonvandenbos]

Hello everyone,

Please report this issue to Nova's team as this will probably impact many other packages as well. If they do not want to fix the overflow-hidden issue on their part we'll have to position the dropdown differently.

[tjmckenzie]

I have this issue as well. In the meantime, I am able to resolve it loading custom css into Nova.

// NovaServieProvider.php
public function boot()
{
        parent::boot();
        Nova::style('custom', public_path('assets/nova.css'));
}

// nova.css
div.relative.overflow-hidden:has(div > div > label[for$="nova-flexible-content"]) {
    overflow: visible;
}

[wize-wiz]

@tjmckenzie Seems to be the same fix as https://github.com/outl1ne/nova-menu-builder/pull/186/files.

It seems I'm unable to replicate this problem in 4.31.3, though the pull was created 2 weeks ago so somehow it seems to cause problems.

[alekmlynek]

I still have this issue. I'm going to attempt the CSS fix above, but it feels hacky.

On Nova 4.32.11. None of the CSS fixes are working for me. Sigh.

[mstaack]

the css mentioned above works with the latest nova version. @alekmlynek you probably have cached content

[DrNajim]

@alekmlynek For the latest verion of laravel nova
"laravel/nova": "^4.32",
"php": "^8.1",

I just solved the issues by adding this at NovaServiceProvider
Nova::style('custom', asset('css/styles/nova.css'));

I added this at public/css/styles/nova.css
div.relative.overflow-hidden:has(div > div > label[for$="nova-flexible-content"]) {
overflow: visible !important;
}
or this
div.relative.overflow-hidden:has(div > div > label[for$="content-creer-page-nova-flexible-content"]) {
overflow: visible !important;
}

[siljva]

I'm having this same issue

I think that css "hacks" to remove oveflow hidden are wrong. It's better to open the dropdown upwards or have it done using VueJS teleport.

https://vuejs.org/guide/built-ins/teleport.html

If I catch some spare time I'll try to fix it and make a PR.

[harmenjanssen]

I agree with @siljva: opening upwards is probably the easiest fix.
The above posted CSS for removing overflow: hidden is not working for me.

[alekmlynek]

@DrNajim @mstaack You're right, I wasn't paying attention to the code snippet. It is important to edit the label content with the actual field itself, which for me wasn't "nova-flexible-field".

For anyone else deploying this:

div.relative.overflow-hidden:has(div > div > label[for$="CHANGE-THIS-TO-YOUR-FIELD-LABEL-IF-NOT-DEFAULT"]) {
    overflow: visible;
}

[damarinov1]

So, not going to be fixed and we need to override it with our custom CSS? Such a Nova way of doing stuff 🙄

[chrispage1]

@damarinov1 make the move to Filament, it's what nova should have been 😅

[mstaack]

my colleague gave me this working css:

.modal > div:first-child > form {
    overflow: visible !important;
}