I have a dropdown selection component, bound to a display variable, with z-axis 100, where everything else on the page is below 100. For some reason when I have to trigger it twice to display in preview or live mode, even though the display variable is set to true correctly.
Essentially the changes my display variable to to true correctly and in edit mode the component displays as expected. When I switch to preview it doesn’t display. When I click again, it displays. This seems to be happening on any div that I place under the dropdown component; have to click twice.
The image here shows that both are visible, but I can’t see them in preview or live, only in edit mode. Any ideas?
Hi Luka, thanks for getting back to me. Unfortunately, I deleted it already from my project, but here’s how I fixed it:
I figured I can easily build my own dropdown menu, which works great. I simply moved the components out in a separate div and used an absolute position on the dropdown part and a fixed position on the backdrop.
Seams like there is a bug in the provided dropdown component and when triggered the Dropdown part is hidden until it’s triggered a second time. Or it might be related to some of the other components on my page, this was inside a modal dialog I have open. Anyway, I don’t think I’ll use that component any more, but someone might want to take a look, or simply implement without it like I did
The dropdown component comes with built-in support for opening the menu, meaning when you click the menu content are shown. In your case you do an additional display binding which is probably why it doesnt work instantly
