Strange coupling of components makes editing impossible

Hi there,

I have sometimes very strange behavior of the components when editing my apps. It seems as if several components are "coupled" internally in the grid. When I move one component, the other component moves down unintentionally. I know that it is partly intentional that components adjust when another component directly abuts them and therefore should be moved. But for me they move even if the other component is far away. I have added an example of this behavior as a gif.


Also, at one point it looks like there is a blocked place in the grid where I can't move anything and which generates jumps when moving. This behavior is very frustrating because besides the component that is shown, all the elements that are under the shown area also move. A targeted creation of an interface is not possible. What happens there and how can I prevent this?
I hope someone can help here :slightly_smiling_face:

1 Like

Has anyone else experienced this problem? :grimacing:

Not the exact same issue, but I also faced a weird behavior of components sticking with each other. For example here:

component coupling

Notice how changing the width of the Currency text makes the bottom Standard exclusions text stick to the group of components.

1 Like

I've run into this kind of weird behavior very often with large (100+ components) Retool apps used for internal data entry, both with moving one component on blank canvas making others bounce around and with resizing a component's width making something else move up and down (or even refuse to position into a blank space).

For obvious reasons, this can make just using the Retool editor suddenly infuriating, because once eight or ten components are acting the same way it's literally impossible to make a given layout work and you just have to hope it will behave better after saving and coming back to it.

1 Like

Our apps also consist of many components, for example we build a CMS and a CRM with Retool. One possibility would be to delete affected components but since they are connected with different events and queries it would be really annoying to redo everything.

Yup - just started using retool and finding this super frustrating. I've got 14 text boxes and I find you cannot arrange them together at all. Move one, it moves another. Even if I use the keyboard, I hit the up arrow and it goes down! I cannot arrange things for a simple mobile web app. Too bad - I don't know if this is a new bug, but it's probably a deal-killer for me.


Hey there :wave: Can I ask if your text components are inside of a container?

I'm having this issue too. It's driving me nuts. Wasting so much time fighting to get the interface how I want it, kinda defeats the purpose of using retool to do things quickly.

Nothing is inside of a container. Would it help if they were? I've tried deleting and recreating some of these components but they still get "sticky" like this. Tried moving with arrow keys instead of dragging, that is messed up too.



Hey there :wave: We have a gated fix for this at the moment, would you mind reaching out either in chat or through email so that I can turn this feature flag on for you?

In case anyone else still runs into this (I still do), the solution that works for me is putting a divider above any components that seem to want to "drift" upwards. You can set it to hidden so it seems like it's not even there but it seems to keep things in check. It doesn't even have to be directly above the drifting component. The divider in this image seems to keep all the components below it from moving on their own.
Screenshot 2022-05-25 010012

1 Like

@shinyllama I have been using the "invisible divider" method to enforce some drifty vertical alignments for several weeks now. I don't recall exactly what inspired me to try it – perhaps my many struggles with CSS in the in the early '00s? But yes it seems to be a (relatively painless) workaround

The only thing I've found that works consistently is to put things in containers.