I am building a form in my Retool mobile application where the visibility of some form components is dynamically controlled by the values selected in some previous form fields. However, I've noticed that hidden form components maintain space on screen by default and there is no way to turn this off. You can control if hidden components can occupy space in Retool web apps - why can't we do the same for mobile applications?
The space occupied by hidden components, especially when two or more consecutive elements are hidden between other form elements, makes spacing between elements inconsistent and negatively affects the look of the form.
Here is a screenshot from my mobile application. There are two hidden select components between the "Fabric weight" and "Wash" select components in this form. There is a large white space between these two components introduced by the two hidden select components and I don't like how it looks.
Is there a work around for this issue?
I haven't found any other threads in this forum category discussing this issue. So, if anyone has a solution, I would appreciate it if you could share your solution for navigating this annoying little issue.
So, after some more testing and playing around with the mobile editor, it appears that hidden components do not occupy space. The white space in my screenshot is not due to the hidden components, but due to the value of the gap between components set on the parent form component.
So, even though the children components are hidden and do not occupy space, the parents component still applies the gap around those elements.
I've attached some screenshots below for further understanding:
Case: Parent form component has a gap value of 12px between components:
Initial state: no hidden child components.
Final state: the rise and pocket count select components are hidden.
The large gap between fabric weight and wash select components in the above image is due to the parent maintaining the gap between the hidden children elements.
Case: Parent form component has a gap value of 0px between components:
Initial state: no hidden child components.
Final state: the rise and pocket count select components are hidden.
As you can see, there is no unusual space between the fabric weight and wash select components. This confirms that hidden components do not occupy space and that the space is caused due to the gap value set on the parent element.
I set the gap property on the parent form component to 0px to eliminate inconsistent spacing between visible components. While this solves the issue of large white spaces, it makes the form look too cramped.
A potential solution is to adjust the gap to 4px instead of 12px. Although this might result in an 8px gap between the two select components, it would be much less noticeable than the previous 24px gap.
