SOLVED: Overlay Feature Breaks Absolute Positioning in Builder

Bricks Version: 1.6
Browser: Chrome 90
OS: Mac

Create a div set to position absolute and top, bottom, left, right all set to 0 (so the div should be the full size of its parent).

You can add a background color to the div to ensure that it’s full size.

Now, instead of a background color, use the overlay feature to add a background overlay to the container (the only way to add a gradient in Bricks).

Your div will now act as if it is position relative instead of absolute:

On the front end, it’ll still be position absolute and look correct:

The positioning is only broken in the builder.

I know that when “overlay” is selected the parent is automatically converted to relative for the attachment of the overlay pseudo element, but when “background” is selected, this isn’t necessary. This appears to be a pretty egregious bug that prevents you from using gradients on absolutely positioned elements.

2 Likes

Hi Kevin,
Thanks so much for your report!

I was able to reproduce the issue and added it to our bug tracker.
In the meantime, reset the position and set it back to absolute. This way around, it seems to stay absolute :nerd_face:

Best regards,
timmse

3 Likes

This is also true when you have an image set to absolute inside of a container along with other static content and attempt to apply an overlay to the image. It pushes any content within the same container below the image. Looks fine on the front end… but in the builder it does not work.

You said “in the meantime, reset the position and set it back to absolute”…

I wanted to clarify that my image still shows absolute in the builder… and the parent container is still set to relative. I am unable to do anything to enable the builder to show it correctly.

Hi Dave,
Welcome to the forum!

I just tested it with an image+overlay and if I understood your post correctly, this problem will also be solved in the next version. If not, please create a new report.

Best regards,
timmse

1 Like

Hi Kevin,
We’ve fixed this bug in Bricks 1.6.2 too, now available as a one-click update within your WordPress Dashboard.

Please let us know if you are still experiencing issues.

Best regards,
timmse

Hey Stefan,

Has this crept back into the 1.7 beta? - Tried to do remove absolute and reapply it but no luck?

Many thanks

Mick

Hi Mick,
not that I know of - as far as the original report is concerned. However, your screenshot looks more like what was described here, to which I never received any feedback.

If there is a problem (different from the one originally reported here by Kevin), please create a new report including reproducible steps :slight_smile: