New to the community? Start here

CSS and Color Picker issues with Popup Pro

I have some issues with some styling as well as with opting to change the colors on popups -

I saw an earlier post about some peoples buttons being "hidden" by the popup and I'm experiencing the same thing. What's strange is that it's CSS provided by the plugin itself that is doing this. A staff member seems to have fixed the issue for the user that posted the thread but only did it by correcting the CSS on the user's specific page. Can we just get the CSS fixed in the plugin itself? Check out the first screenshot I'm adding.

Also, when selecting to change the colors in the popup, the color picker gets hidden due to the fact the the container div, in this case wpmui-grid-12, is set to overflow:hidden.

Is it possible to get fixes for these in the plugin itself rather than having to fix it on a popup by popup basis?

Thanks

  • faydra_deon
    • WordPress Warrior

    It's not really as simple as just getting the CSS fixed in the first place.

    Depending on what theme and/or plugins you are using, this may be causing the CSS in PopUp Pro to be ignored and/or overridden.

    Because of this, the solution to your CSS issues may not be the same as the CSS issues that someone else is having.

    I hope this helps.

    Faydra...

  • James
    • Site Builder, Child of Zeus

    I get that, especially for certain instances where it's likely that CSS will override what you guys are writing. However, for the issues I'm seeing - if you know that CSS could override, say for instance, a button's height, then setting the .wpdu-buttons container to a height of 35px would most definitely cause an issue to many users as you know all buttons can be different sizes. I'm just not sure why there would be a height defined for that div.

    As for the color picker issue - can you possibly tell me which themes this plugin is being tested on? Is it just WPMU dev themes? I'm testing on Genesis Framework and Genesis Childthemes and getting the same results with no other plugins activated.

  • Nastia
    • Support Rock Star

    Hello @James, I hope you are doing well today!

    I'm sorry to hear you have this issue!

    Thank you @faydra_deon for chipping in :slight_smile:

    The Pop Up depends from the theme's stylesheet are enabled on the Wordpress in general. All of our plugins works on WordPress default themes, there are some Themes that may have different standards from WordPress themes.

    Would you please post here the slug of your page where the Pop Up is located, so I could provide you with CSS solution to show the button?

    I was able to confirm that the color picker is not showing entirely because of the CSS code:

    .wpmui-grid-8, .wpmui-grid-12 {
overflow: hidden;}

    And have sent it for our developers to have a look.
    In the meanwile would you please use the following CSS code to fix this issue:

    .wpmui-grid-8, .wpmui-grid-12 {
overflow: visible !important;
}

    Please put this code into a CSS edotor. In case you do not have one, you can use Simple Custom CSS plugin.

    Have a nice day and take care!

    Cheers,
    Nastia

  • James
    • Site Builder, Child of Zeus

    Hi Nastia,
    Appreciate the response! I'm happy to point you to the page that has the issue with the buttons not showing properly however it seems like this would be an issue for 90% of the users out there that don't use a Wordpress default theme? Having a hard height set to 35px means that anyone that has a styled button taller than that will experience the problem. I guess I just don't know why that hard height is necessary? I have the CSS that's already fixed the issue on my side, however we have clients that have access to creating their own popups and would like to not have to ask them to work with CSS.

  • Sajid
    • DEV MAN’s Sidekick

    Hi @James,

    Hope you are doing good today :slight_smile:

    Yes, you are right regarding the CSS issue. However I have also reported this issue to the developer along with CSS selector so it can be patched up in next version.

    Meanwhile try adding this code to make it look good, this code will work for all PopUps (New or Existing). 

    .wdpu-buttons {
    height: auto !important;
}

    Thanks for bringing it to our attention, much appreciated. Feel free to post a reply if you need further assistance, happy to help :slight_smile:

    Cheers, Sajid

Thank NAME, for their help.

1 Point
5 Points
15 Points
Other

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.