What changed at the UI Builder?

UI Builder
#1

Hi all,

So what changed at the UI Builder? The reusable components are not rendering on the page correctly?

Please refer to my attachment. The top photo is a page (in edit mode) where two reusable components are used. They are not shown correctly.

The middle and bottom images are the same reusable components in edit mode. They are rendered properly.

If the page is run in the browser the entire page is rendered prpperly including the reusables.

Hence, the question what changed in UI Builder? Thanks in advance.

Untitled-1
Untitled-1929Ă—1278 99.7 KB

#2

Hello @Ramon_Reyes

We recently changed styles for inner elements in a reusable component, previously it took all width/height when it shouldn’t.

Could you please provide your AppId and the page name, we will take a look

#3

App ID: AE2DDCEC-B9FE-840C-FF14-F909F857AE00

#4

It affects all pages except the main page.

#5

we were able to reproduce the issue and we are already working on the fix

#6

I can see a strange thing in your pages with the Header reusable component, the container has style when it should not, and on different pages these styles are different.

UI Builder - Backendless 2022-08-02 15-26-47
UI Builder - Backendless 2022-08-02 15-26-471920Ă—1201 309 KB

I’m trying to understand how it could happen.
Have you changed source files manually?

#7

No, I did not change anything til Monday, and yesterday was the time I noticed that there were changes on UI Builder. Also, the reusable container looks like a title but it is not. It is a block at is placed at the top and styled to look like a title.

#8

could you please take a look what it looks like now

#9

Sorry, no change. I attached a screenshot. The 2 reusables at the top (there’s three of them on this page) are still not formatted properly. Curiously, the resusable block “Select a Room” is properly formatted.

Screen Shot 2022-08-02 at 11.46.53 PM.jpg
Screen Shot 2022-08-02 at 11.46.53 PM.jpg1280Ă—800 180 KB

#10

Hmm, it’s strange

see it looks properly on my side

UI Builder - rml_hsra - Backendless 2022-08-02 19-02-03
UI Builder - rml_hsra - Backendless 2022-08-02 19-02-032630Ă—1492 353 KB

Btw, on your screenshot there is no image on the top-right corner

#11

So it seems but if you edit the reusable, the image is there at the right side. Where it should be.

Screen Shot 2022-08-03 at 12.06.51 AM.jpg
Screen Shot 2022-08-03 at 12.06.51 AM.jpg1280Ă—800 139 KB

#12

could you please check the image element in the browser dev tool?

UI Builder - rml_hsra - Backendless 2022-08-02 21-11-11
UI Builder - rml_hsra - Backendless 2022-08-02 21-11-111920Ă—1508 306 KB

#13

This one?

Screen Shot 2022-08-03 at 2.31.28 AM
Screen Shot 2022-08-03 at 2.31.28 AM1440Ă—900 272 KB

#14

yes, but in the Page editor

#15

This one is in the editor – page is “form_navigator”. Note–The screenshot I sent before this is editing the reusable compenent.

Screen Shot 2022-08-03 at 2.41.18 AM
Screen Shot 2022-08-03 at 2.41.18 AM1440Ă—900 328 KB

#16

this is the component container, we need to take a look at the image element, could you please drill down to the element?

#17

Here is the Inspect of the UI Builder. Please note that the reusable is not properly rendered

Screen Shot 2022-08-03 at 10.11.55 PM
Screen Shot 2022-08-03 at 10.11.55 PM1440Ă—900 370 KB

#18

try to remove 10% of the root block in the reusable component, because it gets 10% of the component container on the page

#19

That did it. Thanks very much.

1 Like