Bug in UI Builder: Elements Move on Their Own Inside Modal

Issue Description:

I’m experiencing a layout issue when editing a modal in the UI Builder. Whenever I try to move a component inside the modal, it doesn’t stay in the desired position and sometimes automatically shifts to another part of the interface.

It feels like the grid layout inside the modal isn’t working correctly, as if the elements are getting “stuck” or disabled when I try to reposition them.


Steps to Reproduce:

:one: Open the UI Builder and edit a modal in my app.
:two: Try moving a component to a new position inside the modal.
:three: The component does not remain where I place it and sometimes moves on its own or becomes unresponsive.
:four: If I remove the component from a container and try placing it directly inside the modal, the issue becomes even worse.


What I’ve Tried to Fix It:

:white_check_mark:Cleared cache and browser cookies.
:white_check_mark: Tested in different browsers (Microsoft Edge and Chrome).
:white_check_mark: Restarted UI Bakery and rebuilt the modal from scratch.
:white_check_mark: Tried placing elements inside a new container before moving them.


Video Demonstration of the Issue:

Update:
I’ve identified the cause of this issue. The unexpected behavior was happening because of hidden fields that I had moved above the report.

It seems that hidden elements still affect the component organization inside the modal, which disrupts the layout when repositioning components.

If anyone else is experiencing similar issues, I recommend checking for hidden elements that might be interfering with the layout structure.

Thanks for the support! :rocket:

Hi @vitor

Welcome to our community!

Looks like you might have the Preserve space when hidden option on (docs here). You might want to turn it off to avoid similar issues.

Cheers!

1 Like