WIP: Choosing a Div in structure tree many not show full outline in visual builder

Bugs
1

Browser: Chrome 110
OS: Windows

Here I have a page that has a lot of divs in it. It has a lot of divs in it becasue it was a UiChemy Figma to Bricks import. I am getting rid of divs and replacing with Section/Container.

Here I have moved some of the content into 3 sections and the rest of the content is in a Div.

On this page, when I choose the 1st-level Div, it does not show the blue outline on the right the full height of the content that is in it. It only shows it next to a 2nd-level Div that is inside of it near the middle when it is expected to show the blue line the full height off the other 2nd-level Divs inside of it.

This happens in v1.12.4 and v2.0-beta.

See video:

2

I figured out why it is doing it. All the Divs except the one the blue line shows on have a background color set to #ffffff.

The workaround is if I remove the background color on them (It is not needed in this case) the blue line shows full height in the visual builder.

I am guessing the blue line should have a z-index higher than a 1st level Div in the visual builder.

3

Hi @macksix,

can you copy-paste me your section, so I can replicate it? Does not need to include everything, just the needed divs that will enable me to replicate it.

Thanks.
Matej

4

It’s caused when a div has a #fff background color and it is set to postition: relative. Setting the position to static works.

Here is a simple section that shows it when you click on the Div that contains the other two.

5

Hi @macksix,

thank you. I was able to replicate the issue and I’ve added it to our bug tracker.

Best regards,
Matej