Absolute positioning right in preview but wrong in editor

Bug Reports
1

Hey guys,

I've noticed thing really annoying bug today. If I try to add a section, and then I want to absolute position an image over it (as an added background effect) or even a dark overlay so the background image is darker, it is correct in the preview and works as advertised but inside the editor, its all messed up.

I think what the problem is is that absolute positioning takes the position from the parent element but inside the editor, its taking it from the whole pages element. For example, it will make the image go to the bottom of the page in the editor, but align perfect in the preview in the browser. This makes selecting other elements inside the editor extremely hard.

Anybody else encounter this?

2

For what it sounds like your trying to do, Multiple Backgrounds may be a better solution for you. https://www.w3schools.com/Css/css3_backgrounds.asp

As to your current issue, I'd probably need to see your code as I've not been able to replicate the issue.

Saj

3

@saj Just create a container, and inside the container put a div to be absolutely positioned. It will be absolutely positioned inside the container like normal, but absolutely positioned inside the editor window. I found a way around this though so this isn't a killer issue anymore. If you need me to send you the .bsdesign file let me know

4

This is all of my test code. What I see in the app preview is what I see in the browser preview.

<div class="container">
    <img src="hero-background-food.jpg" />
    <div style="position:absolute;width:100px;height:100px;background-color:red;top:0;left:0;"></div>
</div>

If I do not add the top/left positioning, the red square ends up in it's natural position at the bottom left under the image. In the app the app preview overflows it because the app preview height is based on elements that are not take out of the flow of content. A work around for that I have told people in the past to add min-height:100em to the body element so the app preview has enough space.

Saj