I want to add many components in my frame and if a table is the most below, taking just the remaining space without leaving blank space or triggering scrolling by going out of the frame.
I tried Expand content to fit on a container with table in the body and some other components in the header but since it removes all paddings and margins, it doesn't create a decent UI in my opinion.
I also tried Height Auto on my table but it always go out of the frame and trigger scrolling.
I would like to be able to use Expand content to fit to expand the components but keeping some padding. Or I would like my table being able to take just the remaining height of the frame, here Main.
Any solution for this? I would like to be able to do this without Custom CSS if possible
Could you share some screen shots of how the app looks currently and what the desired look would be?
This is tricky as the expand to fix will take away margin and padding to fill space
Maybe you have further nesting of containers so that the table will fill a child container and the child container will have fixed spacing around it on your apps canvas in relation to other components
The desired behavior here would be to have a responsive table that takes automatically the full height of the Main frame without triggering scrolling, this to improve UX.
On the first, the table have a fixed height so some space remain and we don't reach a good UI.
On the second, I use "Expand content to fit", but the UI becomes too dense.
On the third, I still use Height Fixed, but this is the UI I would like to be able to reach by using a setting like "Expand content to fit" without removing padding and margin.
On the fourth, I try to use Height Auto but it go beyond the Main frame height and triggers scrolling.
If I want to nest the table inside a child container, I'm still not able to reach that UI since the child container is gonna take the full space with "Expand contant to fit", I can change the background color to mimic the canvas, but the table inside is still not able to be responsive inside the child container without using "Expand content to fit" on the container and unfortunately removing padding and margin.
You can use a stack container and make use of a combination of spacers and the "fill" option for both height and width. I've attached a json app that shows another way of achieving what I think you're looking for.
