NO BUG: Issues with popup

Browser: Chrome 119.0.6045.200
OS: Windows 11
URL: Items – SoulWorker Wiki

A lot of styling options simply don’t show, grid and more complex flex layouts simply do not work (using the new Ajax loader). Background is white by default even though set up differently within template settings. I had to change this using css.
Alignment issues and the loader doesn’t show.

Hi Roel,
Thanks so much for your report!

However, I can’t understand your problems without further information.
Would you be so kind as to show and explain your problems in a short screencast?

Best regards,
timmse

Hi timmse,
You’re right, I wrote this in a hurry haha

Here is a more detailed breakdown of each issue:
Styling issues:
For example, the background color doesn’t seem to work properly:
In builder:


On front-end:

The text is there, but it’s white so it doesn’t show up.

Also borders:
In builder:
image
In front-end:
image
In the next examples i’ve used CSS to fix these issues to make other problems more clear.

For example the following Flex layout will not work in this popup:
In builder:


image

On front-end

This also counts for the grid, which doesn’t work.

There’s also issues with aligning flexbox content vertically.
Child block settings:
image

Content in builder:

Buildup in builder:
image

On front-end:

Hopefully this makes the issues a bit more clear. If you have any other questions feel free to ask me and I’ll try to give you a detailed answer.

Please note that this is using the new Ajax loader.
Roel

I’m having the same situation and just had a lightbulb moment. Using the AJAX render will render the same popup multiple times on the same page, so styling at the ID level generates conflicts as multiple elements are given the same ID. I just created a class for the elements I wanted to style applied all of the styles to the class. Now it all seems solved! Hope it helps! Cheers!

Hi @div & @blureogroup ,
I can reproduce the problem to some extent, but it would be helpful if I could have a look at your setups to make sure it is the same problem.

Would you be so kind as to send temporary login credentials, information on which popup/page I can see the issues and a link to this thread to help@bricksbuilder.io using the email address you used during the purchase?

Sure, I’ll create you a user on my site.
I’ll send along the templates and pages that I’ll set up for you to test the issues on.

The site is live but it’s a sideproject so nothing too serious but still good to get these bugs out of the way.

I’ll do this tonight since I’m at work now, thanks for the reply

Okay, I’ve made you an account and e-mailed you the log-in credentials to help@bricksbuilder.io

Under Templates you’ll find the following 2 templates:

  • TEST ARCHIVE
  • TEST POPUP

Of course, the TEST ARCHIVE is the template for the archive, and the TEST POPUP is the template for the popup. The template is visible at the Items page:
https://soulworker.wiki/items/

If you have any questions feel free to ask me.

Hi @div ,

Thank you so much for the login details.

The looping popup template is not placed inside the loop, and that’s the reason those styles are missing.

image

I removed the custom CSS that you applied earlier for the temp fix on the popup wrapper and the template element inside the TEST ARCHIVE template

The AJAX loader for the Popup is not showing, because you didn’t set it :slight_smile:

image

Please let me know if it’s working correctly now?

By the way, I feel so cool that you are using Bricks to build a game wiki site :slight_smile:

Regards,
Jenn

1 Like

Hi Jenn,

Sorry for the late reply, got caught up at work and finally have some free time to check.
I’ve checked it but it seems the flexbox still doesn’t seem to be functioning properly inside the popup, everything is on a new line even though I’ve put the 2 elements in a block and set it to horizontal layout:
image
image

EDIT: I’ve disabled “Render without wrapper” and now it works. I’m not sure why it does that but apparently it works :slight_smile:

Thanks for your help!