New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Modal close button gets hidden with some themes #1709

Closed
mathetos opened this Issue May 18, 2017 · 3 comments

Comments

Projects
None yet
5 participants
@mathetos
Member

mathetos commented May 18, 2017

Issue Overview

Some themes come with magnific pre-installed and they do all kinds of crazy things with it. Generally, Give handles that fine, with the exception of the CLOSE button. We need to tighen up the styles on it to prevent it from getting lost.

Expected Behavior

The close button should always be visible in the top-right of the Give modal window.

Current Behavior

Sometimes it gets bumped off the screen and is invisible which makes it virtually impossible for common users/donors to close it if they want.

Possible Solution

Since our button is physically inside our Give form, we can target it very specifically:

We currently have some custom Give styles for the close button, but I don't think they have enough specificity:

.give-modal .mfp-close, .give-modal .mfp-arrow, .give-modal .mfp-preloader, .give-modal .mfp-counter

Updating those as follows should resolve it.

form.give-form button.mfp-close {
    position: absolute;
    display: block !important;
}

That means updating the wrapper element here and the classes here

Steps to Reproduce (for bugs)

I have a theme called "Impreza" which displays this behavior, and the above styles resolved it. And here's a customer which had the same issue with a different theme:
https://secure.helpscout.net/conversation/367248879/7722/

@DevinWalker DevinWalker added this to the 1.8.15 milestone Sep 15, 2017

@DevinWalker DevinWalker modified the milestones: 1.8.15, 1.8.16 Oct 19, 2017

@ravinderk ravinderk modified the milestones: 1.8.16, 1.8.17 Oct 26, 2017

@mehul0810

This comment has been minimized.

Contributor

mehul0810 commented Oct 30, 2017

@mathetos I will require "Impreza" WordPress Theme to try and reproduce the issue to fix. Also, let me know which other WordPress themes are having issue. Please do the needful.

@mathetos

This comment has been minimized.

Member

mathetos commented Oct 30, 2017

@mehul0810 I pinged you in Slack. Thanks!

@marutim

This comment has been minimized.

marutim commented Oct 30, 2017

We received another ticket with this issue here: https://secure.helpscout.net/conversation/457276120/11260?folderId=1457790

@mehul0810 mehul0810 referenced this issue Nov 1, 2017

Merged

Issue/1709 #2272

3 of 3 tasks complete

@DevinWalker DevinWalker closed this Nov 2, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment