Form component body scroll disabled when inside a stack container and height set to fill

💬 App Building
1

Good evening everyone,

I’ve just faced a bug with the Form component inside a Stack container and using Fill height. The scroll of the body disables.

formAppTest.json (37.2 KB)

  1. My goal:
    I am trying to set up a page with a unique responsive form in the middle taking the full screen height
  2. Issue:
    The form is placed inside a stack container and its height is set to Fill
  3. Steps I've taken to troubleshoot:
    When I set the height to Fixed, the scroll of the body enables. Auto, of course, get rid of body scrolling
  4. Additional info:
    Cloud-Hosted Retool version 3.286.0

Cheers in advance for your help!

1 Like
2

Hello @sacha,

I noticed that the “Expand Content to Fit” option is enabled on Main Container , which is why the body scroll is disabled. To resolve this, you can enable “Expand Content to Fit” in the wrapperContainer and then adjust the form fields as needed.

Screenshot :

image
image1919×842 74.2 KB

3 Likes
3

Good afternoon @WidleStudioLLP ,

Thanks for your answer but unfortunately with your solution my UI is broken and this doesn’t explain why the scroll is disabled since if you place a table rather than a form, the scroll is still enabled either with a Fixed or a Fill height.

Test app form responsive.json (100.8 KB)

4

Hi @sacha, I tested your app json and saw that when I inspected the body of the form in chrome dev tools, the overflow stays set to hidden, regardless of changing the setting through the Retool UI. I submitted a bug request for this, but in the meantime this custom CSS should work:

._body_utpul_163 {
  overflow: scroll !important;
}

Keep in mind that class names can change over new retool releases so you may have to inspect the page to find a new class name if it stops working. Here is some potentially more robust custom CSS (replace "FormName" with the name of your form component):

div[data-testid|="FormName"] form > div > section > div {
  overflow: scroll !important;
}

Let me know if that helps!

4 Likes
5

Hi @Mike_M

Thanks for submitting the bug request I appreciate. Could I be updated when this bug is fixed please?

Also thanks for the CSS workaround but since class names might change regularly, I won’t use it for reliability reasons.

Have a great one!

6

Yes we will for sure update when it’s complete.

Thanks sacha you too!

3 Likes