CSS conflict with WP Engine Staging modal

Resolved spaciousmind
(@spaciousmind)

8 years, 10 months ago

Hi,

We’ve come across a conflict with WP Engine’s Staging function where if you try to create a staging site in your WP admin while having Simple Download Monitor installed, the .modal selector conflicts with WP Engine’s .modal selector and makes it unable to click the “Deploy to Staging” button.

I’ve asked them the same, but would you consider changing your css in future versions to use something more specific, such as .sdm-modal, so as not to conflict?

Thanks

Viewing 3 replies - 1 through 3 (of 3 total)

Plugin Author mra13 / Team Tips and Tricks HQ
(@mra13)

8 years, 10 months ago

I am not sure I understand the issue. Can you share a screenshot by any chance to show me the conflict you are talking about?

Thread Starter spaciousmind
(@spaciousmind)

8 years, 10 months ago

When hosting with WP Engine, you get a WPE-specific set of controls in your WP Admin. One of these is to create a staging site. To create one, you have to click a button that triggers a modal window that contains another button confirming that you want to do the action. They are using a class .modal to style this window’s position and z-index, and Simple Download Monitor’s .modal styles are causing their modal not to be clickable, stuck under an overlay. When I use my browser’s developer tools and remove SDM’s declarations for .modal in sdm_admin_styles.css, I am able to use the functionality as intended.
Plugin Author mra13 / Team Tips and Tricks HQ
(@mra13)

8 years, 10 months ago
I am pretty sure the following CSS code can actually be deleted from the “sdm_admin_styles.css” file (we no longer use it).
```
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('images/ajax.gif') 
                50% 50% 
                no-repeat;
}
body.loading {
    overflow: hidden;   
}
body.loading .modal {
    display: block;
}
```
Please delete that code then try it in your staging site. Let me know if you see any issue. There shouldn’t be any.

If you test is positive, we will remove the code from the plugin in the next version.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘CSS conflict with WP Engine Staging modal’ is closed to new replies.