[Resolved] unable to override bootstrap modal css on initial page load

[Author]

Posts

[Joe H.]

On this page: hidden link I have filter results displaying links to bootstrap modals. It seems I am having to use !important on the .modal-backdrop class to override the default z-index (z-index:1040) of the modal so that my modal content is clickable (not sure why I am having to do this). I am using this css in my content template for this View:

.modal-backdrop {z-index: 0!important;}

However on initial page load the default bootstrap css still overrides this, even with !important. Its only when I refresh the page and try the link a 2nd time that my css takes effect.

So, to recreate:
- load page
- make a selection in the filter
- click the link of the filter results
- modal will be unclickable/behind the modal backdrop (inspect .modal-backdrop and notice my css is not present)
- refresh page and click link again
- modal works as expected (inspect again, my css is present)

In another similar thread it was suggested targeting a more specific element. However I dont see a way to add an ID to this modal backdrop since it seems to be getting added to the page via other bootstrap classes (e.g. .modal).

Any suggestions how I can make my css override bootstrap on initial page load?

[Noman]

Hi Joe,

Thank you for contacting Toolset support. You can fix this issue by adding following CSS in your theme’s style.css file or custom CSS file.

body .modal-backdrop.fade.in {
    z-index: 0 !important;
}

Please add in that file and let me know how it goes.

Thank you

[Joe H.]

Thank you for reply. I added the provided code, but just as before, my custom css being added via Toolset does not load at first. It only loads after the page is refreshed (after initial page load). On the initial page load, the provided css is not there, and the default bootstrap css remains in effect.

[Noman]

Hello Joe,

Okay, to further debug this issue I need to request you please provide temporary access (WP-Admin and FTP Login info) to your site (preferably staging site), so that I can look into your setup and check the issue.

Your next answer will be private which means only you and I have access to it.

=== Please backup your database and website ===

✙ I would additionally need your permission to de-activate and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important.

✙ Please provide link to [View] Edit Screen.

Thank you

[Noman]

Hello Joe,

I have added following CSS in your child theme:

body .modal-backdrop.fade.in {
    z-index: 0 !important;
}

And it looks as in attached screenshot.

Please clear your browser cache and check here:
hidden link

Thank you

[Joe H.]

Ok I guess I assumed css added directly into the css field for the View would take precedence over css added into the child theme. This is resolved. Thank you.