[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:
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.
