Hi, we experience some pretty weird behaviour when using "stack" and getting some drag-/drop-events.
The stack-size grows suddenly, in this case when we try to drag a file into the window, but it behaves the same on every drag-event.
This is pretty annoying, cause we use stacks pretty often.
Could you check on it? We use 3.196.6 in self-hosting.
Here an example-module:
drag_stack_resize_bug.json (17.8 KB)
Thanks and best regards!
Hey @flaschenpost-wha,
I'm trying this as a demo in my module. The problem seems to stem from improper layout adjustments within the display stack.
To fix it, try setting a fixed height for your cont_common component and applying overflow: hidden. This should resolve the display issue in your module.
Hi, thanks for the reply. This settings did not help at all, header is still expanding.
Just content is no dissapearing
Even setting the fixed height on the header and hide scroll wont work, header height seems good, but content still expands.
WHy should it expand at all? Maybe some setting to help arranging stack-objects in edit-mode were not disabled in view-mode?
Hey @flaschenpost-wha,
We've noticed a strange bug — it's not just when dragging a file, but also when dragging any component or even the mouse, that the issue appears. This might be happening because the header container is set to use a stack display, which could be causing the UI glitch.
I apologize, but I'm currently unable to fully resolve the issue. However, I do have a potential workaround: try setting the header container to use a grid display instead. I understand that this may not provide the exact layout you want in the cont_common container, but it can help avoid the glitch.
Hi @Darren and @Jack_T , will there be a fix for this problem. It is extremely annoying and a fix would help us a lot.
Thanks!
Hey @flaschenpost-wha - thanks for the bump. I'm not able to share a specific timeline, but do imagine that this is something we want to fix. In the meantime, I did some additional testing and was able to suppress the undesired behavior with custom CSS.
I don't think this will break any other styling and should be fairly durable, given the fact it directly references the name of the component. Hopefully it can be a serviceable workaround! I'll provide an update here as soon as I have news to share.
Hi @Darren , thanks for the workaround. What is the pattern in the css data-test-scope? Is Widget-Grid just the root of the canvas and the other parts just the normal path to it? What about Containers in Modals/Drawers?
The Docs are short for custom CSS: Custom CSS styles | Retool Docs
A little more explanation around custom css would be cool!
Thank you 
My general approach when writing selectors for custom CSS is to actively inspect the page's elements, in part because there's just not a lot of consistency. A comprehensive guide to custom CSS would be a large undertaking!
In this particular case, I'm pretty sure Retool sets the container's min-height during a drag-and-drop event in order to make it more easily targetable when moving components around the canvas. One reasonable fix is to prevent this behavior when moving other entities around or to disable it entirely outside of the IDE.
Regardless, the selector we can use to target those containers and prevent Retool from changing the min-height is very consistent. It should always be div[data-test-scope="WidgetGrid::containerName:body"], unless you are targeting containers within a nested module. In that case, it would be div[data-test-scope="WidgetGrid::moduleName::containerName:body"].
Let me know if that makes sense and if you have any additional questions!
