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

Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
URL: Link to a page that illustrates this issue
Video: Short screen recording that illustrates this issue (free tool: jam.dev)

[Please describe this bug in as much detail as possible so we can replicate & debug this bug]

I am doing an initial review of Bricks Builder and playing around with the free ‘try it’ version. I am a current Breakdance user and wanted to see how Bricks compares to Breakdance. So far I like what I have seen in the docs, videos and website. But finding this bug right out of the gate and seeing hoe many bugs are currently present has me a bit concerned about dropping my money on this builder. Please have a look at this…

Preview Panel View is jumping around when I am trying to edit the padding on a Section or Content element that is 100% width. I inspected the builder code and I can see that the ‘bricks-preview-element-spacing padding right nestable’ div is rapidly changing values between ‘-11’ and ‘11’ rapidly.

Looking deeper it appears that this is happening because the ‘body’ CSS code in (builder.min.css) is set to this:

body {
    overflow: auto;
}

Changing it to ‘hidden’ seems to fix the issue:

body{
   overflow:hidden;
}

Here is a video of the issue. sorry its low res. it was a free service:
https://www.awesomescreenshot.com/video/24875392?key=7218c0889cb12ebd23cf82f259119561

Hi,
Welcome to the forum, and thanks so much for your report!

Unfortunately, I cannot reproduce the issue. Can you please tell me exactly (preferably numbered steps) what is causing the behavior? I tried padding and widths, but nothing wiggles back and forth :thinking:

You can also show and explain your settings in a new video. But please use https://jam.dev/, which also contains a free plan and creates good-quality videos + additional information that may be helpful for debugging. Due to the quality of your video, I recognize almost nothing… :face_with_spiral_eyes:

Best regards,
timmse

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

Thanks so much for the additional information!

Nevertheless, it’s kind of a strange phenomenon, because no matter how hard I try: I can’t reproduce it on our dev server and my local installs - but I can on try.bricksbuilder.io, and have added it to the bug tracker.

Does the standard (licensed) Bricks Builder (running on your own servers) also run in an iframe like the try.bricksbuilder.io instance does? I’m just wondering if perhaps that’s part of the issue.

Can you perform the code inspection on one of your local or dev server instances to see if its running in an iframe too? And also, check if the the body{} CSS is using the same overflow:auto; setting as the try.builder.io instance?