Drawer Frame Content Jumps When Displayed

💬 App Building
1

My app displays a table of students. When the user clicks on a row, it opens a drawer frame with more details about that student. It used to open and display smoothly, as expected. Yet, sometime in the past several weeks it started behaving differently, and I have no idea why. Now, when you click on the row, the drawer frame opens as expected with the content where it should be, but then the content jumps to the middle of the drawer frame and then back to the top. It makes for a very jarring user experience.

I've tried to research the Retool docs and forum for a solution, but can't find one anywhere. I do have a custom width for the drawer frame and thought that might be the cause, but I tested it without and the problem persists. I tried adding the following to the custom CSS to see if I could force the content to stay at the top, with no success:

[data-testid*="RetoolGrid:groupStudentInfoDrawer"],
[id*="RetoolGrid:groupStudentInfoDrawer"] {
  position: absolute !important;
  top: 0 !important;
  height: 100% !important
}

I also tried setting the height to a specific height and the problem still persisted.

Here's a video demonstrating the issue: Drawer frame with jumping content

Has anyone else encountered this issue and found a solution?

1 Like
2

Hi @Jennifer_FreedomPrep,

That's odd. It seems though that the issue lies more with the components within the drawer (maybe a container, or an image), rather than with the drawer itself.

Any chance you're able to share a screenshot of your drawer's component tree? Maybe try troubleshooting removing some of the components to see if they are taking more space whilst rendering and then going back to their defined height.

3

Thank you for your help! You were exactly right. It turned out to be the text component in the header of the drawer frame.

By default when you add a drawer frame, it includes a text component for a title in the header. That component's height is automatically set to "Auto." Switching the height to "Fixed" solved the problem.

-Test-Template-Freedom-Prep-Academy-Editor-01-29-2025_10_58_PM
-Test-Template-Freedom-Prep-Academy-Editor-01-29-2025_10_58_PM1767×1190 152 KB

I tried this out in a brand new app to see if it was exclusive to something in my design/code. I was able to reproduce the issue. Switching the height to "Fixed" resolved the issue there, as well. Seems to be a bug that was recently introduced, as it was never an issue for me before.

Thanks again for pointing me in the right direction!

1 Like
4

Great catch! Thanks for sharing what was causing the issue.