[Resolved] cant get z-index layers to display properly

[Author]

Posts

[Joe H.]

On this page hidden link

I have my loop output results styled as boxes that when clicked open bootstrap modals, a different modal for each item in the loop. This works fine, but I am having much difficulty getting the layers of boxes, modal content, orange modal background and the "sign up" button below the loop results correct in terms of their layers (z-index).

I want the open modal and its orange background to be in front of the rest of the page content (i.e boxes and buttons).

I have tried creating a local stacking context by adding transform: scale3d(0,0,0) to the parent div (#id = "finder") but this only brings the background to the foreground. So I am not sure how to fix this. I am sure its just improper CSS but I have tried for hours to figure out and am stuck.

Thanks for taking a look. I will attempt to provide admin access in private post.

[Luo Yang]

Hello,

It needs custom JS codes, I suggest you follow Jquery document to setup the z-index value as what you want:
hidden link

If you still need assistance for it, please provide a test site with the same problem, I need to test and debug it in a live website.

[Luo Yang]

Thanks for the details, I am checking it in your website, will feedback if there is anything found

[Luo Yang]

Thanks for the details, I have done below modification in your website:
Edit view "Group Finder", in section "Loop Output Editor", click "CSS Editor", add below css codes:

.e316-107.x-container, .e316-108.x-column{
    position: static !important;
}

Please test again, check if it is fixed.

And for your new question:
Why would a basic toolset loop and bootstrap modal require custom javascript?? What makes you think that?
This is not a problem related with Toolset, but a compatibility problem between button element of Pro theme and Bootstrap modal.

[Joe H.]

your change is an improvement, thank you. the Pro theme button is now behind the modal dialog. But the other part of my question remains: the output of the loop (the white boxes with orange border) are behind the modal dialog but in front of the modal background. They should be behind/underneath the orange modal background. I am assuming these 2 issues are related?

[Luo Yang]

No, they are not related, and it needs custom CSS codes too, I have added below CSS code in the same place.
Edit view "Group Finder", in section "Loop Output Editor", click "CSS Editor", add below css codes:

.modal.fade.show{
background-color: orange;
}

It is only an example for setting the background-color, you will need to customize according to your request.

More help:
hidden link

[Joe H.]

So I have removed the 2nd bit of css you added, as I think it was taking me in the wrong direction. I went back to basics and isolated one line of css that is the source of my issue: when, and only when, I add a background color to the div containing the loop output - the modal trigger (i.e. the columns with the class .group-modal), this for some reason conflicts with, or impacts the modal dialog and its background. It brings the .group-modal div forward in the stacking order so that it is in front of the modal background. I want it behind the modal background, but explicitly setting the z-index and stacking context has no effect.

I have attached a gif to demonstrate what I mean. Hopefully it is clear.

I would like to have solid white background on these columns, and yet have them behind the modal background when open, so this is still not resolved.

[Joe H.]

I resolved this on my own by ditching Bootstrap and figuring out how to use my theme's built in modal with Toolset.