Layouts dropdown cutoff if the Flexible field is placed too high in a panel. about nova-flexible-content

[voidgraphics]

Good catch, thanks. We'd accept a PR that fixes this if anyone is up to it.

[toonvandenbos]

The problem comes from an overflow: hidden on nova's fields container. I see two possible fixes:

• Move the dropdown DOM element outside the problematic div and position it absolutely ;
• Show the dropdown below the button if we don't have enough space above.

The first one may be a little bit tricky with Vue.js I think, the second one doesn't solve anything if the Flexible field is the only field in the form.

Other ideas ?

[voidgraphics]

Maybe we should not make it absolutely positioned. Let it be in the flow. Might need a different design though? Not sure.

Or just find a way to disable the container's overflow: hidden without breaking anything.

[toonvandenbos]

IMO we shouldn't touch Nova's base layout. There's probably a good reason (even if I couldn't find it...) for that particular overflow: hidden.

What are your arguments against the absolutely positioned dropdown?

[voidgraphics]

The argument is that we can not control the container's height, which means we can't prevent our popup from sticking out if it's too tall, if it's absolutely positioned.

I don't like this solution either but it might be the only way to make it work in every scenario.

[toonvandenbos]

The dropdown has max-h-search overflow-y-auto, meaning its max height is 392px. After that, the dropdown has a scrollbar.

We could reduce it to max-height: 140px and position it absolutely, and it won't stick out. Here's an example:

But the Vue.js problem remains, I have no clue how to render the dropdown outside of the field component without messing with Vue's references. I did some quick searches but all the solutions I found are suggesting to modify the base template, which we can't do from a simple PHP package, unless I missed something important.

[toonvandenbos]

This issue seems fixed in Nova 2.0.9 (or earlier, didn't notice the change before). The overflow: hidden; on the parent container has been removed.