Appearance of reusable component in UI builder: width set to 250px

UI Builder
1

When we have a component that has some width (like 100%) and we turn it into reusable component, in the UI Builder the appearance of the component is “squashed” to be only 250 px wide. The actual page (preview and published app) looks fine, but it’s somewhat annoying to see all of our reusable components set to 250px width in the UI Builder. Why is this, and is there a fix we can apply?

2

Hello @Alex_Klein

Unfortunately, I can’t reproduce it in my app.
Could you share with us an example? Will be great if it was a minimal reproducible case on a new page.

Regards, Dima.

3

Hello Dima, I created a simple page where I have reproduced the problem:

Page is called “Reproduce”, in the container called “AlexK_prod”. Our application ID is: AE4235E1-DBB7-C6F0-FF4A-E0378B0B2B00

On this page, I put a pink block inside a bigger block. The pink block is set to width: 100%, max width: 600px. As soon as I convert the pink block into a reusable component (called testBlock in our application), it shrinks to a very small width (20px, probably because of 10px padding on left/right) in the UI Builder. But in the page preview, it looks fine (600px wide). So the UI Builder is showing me a squashed component.

4

Thank you @Alex_Klein

I was able to reproduce it. The fix for that is ready and we are waiting for review and testing. We will notify you when it will be released.

Regards, Dima.

6

Super nice, you guys are incredibly responsive :clap:

7

Hi @Alex_Klein,

We’ve released the new version of Backendless.
Please, could you confirm that this issue doesn’t appear?

Regards
Nazar

8

Hi Nazar, our reusable components are still “squashed”. Tried editing the reusable component a little and dragging a new instance into the page… still squashed. Is there some trick to fix the issue for our existing reusable components? Otherwise, I think the issue is still there…

9

Hello @Alex_Klein

Sorry for the inconvenience, you are right - the issue is still there. But, we could offer you a workaround for now - just add an empty block without sizes into the root of your reusable component(to make 2 or more elements in the root).

It won’t affect anything as there is no logic, and that div will be static and unseen, but it should solve your issue in the ui-builder.

As for a thorough solution - we will notify you when it will be fixed.

Regards, Dima.

10

Strange workaround but seems to work :man_shrugging: