SOLVED: Preview Panel View Jumping Around with 100% width Section with padding

Bugs
4

Hi timmse,

Here is the Jam video: Jam

I am using the try.bricksbuider.io version 1.9.6.1. I am running on a Mac desktop with Monterey and Chrome.
image

Steps to Reproduce:

  1. Open Bricks Builder.
  2. Create a new Template.
  3. Click on the Create ‘Section+Container’ button in the ‘preview panel’.
  4. Select the ‘section’ in the ‘structure’ panel.
  5. Click on the ‘Style’ button in the ‘bricks panel’ then click the ‘Layout’ accordian.
  6. Click the ‘All Sides Linked’ button in the Padding control and set any value there.
  7. Now select the ‘section’ item in the ‘structure’ panel.

Result
The 'preview panel rapidly shows and hides the scrollbars (both horz and vert scrollbars) causing an flickering effect.

If you inspect the html/css code in Chrome Dev Tools and dig down into the ‘bricks-builder-iframe’ HTML code, you can see the ‘bricks-preview-element-actions’ and ‘bricks-preview-element-spacing margin’ divs are also rapidly flashing with changing ‘width’ values.

It appears that the data balloons are causing the issue by pushing the width of the preview area past it’s current width, and since the ‘body’ css class is set to ‘overflow: auto;’ the scrollbars appear and then what is likely happening is the render loop is reseting the width again, and it just goes on and on like that.

If I set the ‘body’ class to ‘overflow:hidden;’ the issue goes away. So, I think if you have your developers set that CS element in builder.min.css, that should resolve the issue. Though I am just looking at this from the most basic standpoint. It may require some additional though on how you wish the handle the UI controls in situations where they are expanding tpast the preview area width and height.

I also looked at how Breakdance handles the builder preview area and it has the ‘body’ css class set to ‘overflow:hidden;’ as well.

Thank you,

lanrosta