NO BUG: Popup invisibly over other elements after closing

Bugs
1

I’ve created a woocommerce quick view popup on this test site here and for some reason after closing the popup it’s still in the dom invisible but on top of other elements disturbing the clicking behaviour of the user.

I’m describing the problem in this video.

Is this some sort of bug or I’m I doing something wrong with the popup set up?

2

Hey bud :wave:
Did you try adding the Template Element for the popup? (Sorry if you already did, I just couldn’t spot it in your setup).

Also, instead of attaching the interaction to an ID, try binding it to a class.
Not 100% sure it’ll fix the issue, but definitely worth giving a try.

1 Like
3

Hi Binu, thanks for the comment. I tried both of your suggestions but it didn’t solve the problem.

4

I noticed that when the popup is active, popup classes are like this:

image
image943×126 20.8 KB

When I close the popup, the class .hide is added

image
image973×272 31.6 KB

So I added this CSS which fixed it:

.hide {
    display: none;
}

I don’t have a global class .hide.

Should the bricks theme have this CSS declaration by default added?

5

Hi Barnabas,
Thanks so much for your report!

You should definitely use the template element inside of the loop instead of using a condition to assign the popup (which is currently the case).

So please remove the popup condition from the popup settings, and add the template element to the loop.

Best regards,
timmse

6

Hi Timmse,

I have removed the Popup conditions from the template
image

And I added the template in the loop

image
image701×218 9.21 KB

However, this CSS for the .hide class needs to be in place:

.hide {
    display: none;
}

Do you agree?

7

No I don’t agree, as the visibility of the popup is (or should be) handled by this:

image
image860×202 18.7 KB

Please send temporary login credentials and a link to this thread to help@bricksbuilder.io using the email address you used during the purchase.

8

Hi Barnabas,
Thanks so much for the login credentials!

I found a way to fix the issue, but I’m unsure about the cause. It must be related to your specific setup with the nestable slider in the quick view popup, as we can’t replicate it on our end. If you find a simple way to replicate it, please let us know.

Anyway, I just added this custom CSS to the main wrapper class of the quick view popup, which seems to fix the issue:

.brx-popup.brxe-popup-56319.hide .splide.is-initialized, .splide.is-rendered  {
    visibility: hidden;
}
9

Hi Stefan,

Thanks for your time looking into it. I can confirm that it works as well on the live site this solution.

So it’s solved and not a bug.

Thanks a lot and best regards,
Barnabas

1 Like