[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:
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
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…
I am using the try.bricksbuider.io version 1.9.6.1. I am running on a Mac desktop with Monterey and Chrome.
Steps to Reproduce:
Open Bricks Builder.
Create a new Template.
Click on the Create ‘Section+Container’ button in the ‘preview panel’.
Select the ‘section’ in the ‘structure’ panel.
Click on the ‘Style’ button in the ‘bricks panel’ then click the ‘Layout’ accordian.
Click the ‘All Sides Linked’ button in the Padding control and set any value there.
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.
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?
We have already received a more recent report on this, but I have not been able to reproduce the problem yet. Can you give us a reproducible example/steps in the thread mentioned?
Click on the Create ‘Section+Container’ button in the ‘preview panel’.
Select the ‘section’ in the ‘structure’ panel.
Click on the ‘Style’ button in the ‘bricks panel’ then click the ‘Layout’ accordian.
Click the ‘All Sides Linked’ button in the Padding control and set any value there.
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.
