Dropdowns Under Column BG

[tomr96]

Hi there,

I have spent hours just trying to get my Content Dropdown to appear above my Columns around it - I cannot get it to work - I have recreated the whole thing above itself and the issue is still happening.

Please please please could you help me:

I have changed all the Z-Index items so columns are less than the one before, but it doesn’t work as when the columns move about due to different screen sizes the dropdown is then underneath a different column and not just the one directly below it.

I have tried CSS setting Z-Index on the Dropdown themselves to be 99999 etc.

I have cleared the Cache.

I have tried to recreate the whole page as mentioned.

I have set all Z-Index items to be auto.

I have upgraded to 4.2 and this didn’t work but did stop Global Blocks (so had to revert to 4.1.5).

When recreating it, it seems to be when adding the lower layer background to the column that it all goes wrong - prior to this the issue is not there.

I have popped the information into the Secure Note and would appreciate any help.

Thanks, Tom.

[alexander]

Hi Tom,

This happens because of the advanced backgrounds being positioned and having a z-index. It’s tricky to get any content showing above them. Here are are ideas:

1. Inspect the first column and set a z-index of 100. Inspect the second column and set a z-index of 99… continue until all the columns have a z index lower than the one before it. It works but isn’t a very ideal way to manage things.

2. This is a bit more involved:

• Set z-index: 1 on the Columns
• Disable Advanced Backgrounds on Columns
• In each column add Div element above the grid
• Set the Div to position absolute, and 0 for top, left, bottom, and right.
• Set the Div to z-index: -1
• Enable the background on the Div

This second method will help wrangle how CSS handles positioning contexts and stacking.

[tomr96]

Yes @alexander !!!

Option 2 me thinks! Thanks so much for confirming it’s not me, that helps the most

I tried option 1, but didn’t work as mentioned due to responsive site.

I’ll work around that then, at least I know.

Also, apologies for posting in Beta, I must have selected it by accident.

But whilst you’re here I have posted about a change to Global Blocks in v4.2 that’s caused name changes, is this a bug? (4.2 Global Blocks Broken)

Thanks, Tom.

[alexander]

Sounds good! And no worries about posting in beta. I’ll move this to support in case anything else is needed and I’ll have a look at the other thread as well.

[tomr96]

I have tried the above Alexander and this didn’t seem to work.

I have also tried the Grid inside the Div and this didn’t work either.

I might just give up on this and put a standard image as a background for another Cell… then drag it to be underneath the current Cell 1 with the Black BG - if that makes sense.

Thanks, Tom.

[tomr96]

I’ve spent today on it again Alexander and have tried the below.

Creating a Grid inside each Column with Cell 1 (top) having background image and Cell 2 (bottom) being the text.
Creating a Grid inside each Column with Cell 1 (top) having an image element with in and Cell 2 (bottom) being the text.
Creating a Grid inside each Column with Cell 1 (top) having a Div inside it with a background image and Cell 2 (bottom) being the text.
Creating a Grid inside each Column with Cell 1 (top) having a Div inside it and then an image element within it and Cell 2 (bottom) being the text.

Div’s have been set up as you mentioned Column on z=1 and Div z=-1.

This is still going under the image, even if I now take out the Background image, it still won’t go over the top of the image.

See the duplicated Grid’s below having this issue:

I would really appreciate any help here now as I have pretty much exhausted all options.

Can I not just set .x-dropdown to be z-index: 99999?

[alexander]

Hi @tomr96,

My apologies, I tested that again and I must have had something off. I had it working yesterday, but I think it was the Column z-index not being the same. I’ve just tested it again and the following steps will get it working on a fresh page. Perhaps you could try this to get a feel for the setup, then make the adjustments needed in your content.

• Add a Section
• Click one column
• Inspect the row and set the number of columns per row you’d like to have eventually
• Add a Div and Grid element to the Column
• Click the 2 column option on the Grid (you can change it later)
• Inspect the Div
  • Enable Advanced backgrounds and add an image
  • set z-index to -1
  • Set position to absolute and position the four sides at zero
  • At this point you should see the background image fall behind the Grid, and Div’s dropzone disappears
• Place a Content Area Dropdown element inside one of the Grid Cells
• Inspect that cell and use eith the y-axis cell alignment or flexbox to move the dropdown to the of the cell
• At this point, when you click the dropdown the content should appear outside the column
• Inspect the Column again and duplicate several times so it fills into multiple rows
• Clicking the dropdown toggles should now keep the content above the images

The way browsers handle stacking and z-index is definitely one of the more challenging concepts to fully understand. There is a method to all the madness, but things have to be done quite precisely. Unfortunately it is a hard thing to visualize while working on it isn’t always clear which layer is causing an issue. This article is a pretty good read on the subject: https://ishadeed.com/article/understanding-z-index/

[tomr96]

Thanks Alex.

I have no idea what I have done, but it’s working and I ain’t touching it hehehe XD.

The Z-Index i usually am fine with, but in this case, with like 10 on each thing it was making me go a bit foggy.

I have the below with it working:
Section (z=auto) > Row (z=auto) > Column (z=auto) > Grid (z=auto) > Cell 1 (Top Image as Lower Layer BG - z=1) + Cell 2 (Text and Dropdown - z=auto).

This has been duplicated and is working fab now!

Maybe dropdown Z-Index could be an option to be added?

Thanks, Tom.

[alexander]

Great! Really nice to see it all working now. Good to hear you got it sorted out. You might be pleased to know we’re working on some improvements for a release that’s scheduled for April. We’re adding Dropdown elements that will allow you to build directly inside of them. They’ll be treated somewhat like Columns/Cells where you can manage children elements placed inside them. This way you’ll be able to build out designs like this without needing Global Blocks. There will also be Modal and Off Canvas elements with the same behavior.