I've been actively working with Retool for more than 5 months now. It's a big platform with lots of use cases, so naturally there are all kinds of features one could ask for.
However, no matter the project, there's one thing that always comes up: the ability to remove paddings from containers (that includes: forms, normal and tabbed containers).
This is something that I always have to fight with and spend time trying to figure out how to avoid making the UI look too boxy and nested. I've tried every possible custom CSS I could think of, but it always leads to other problems. I've heard this complaint from other developers as well and also seen people asking about it here in the forum.
Being able to group components is something fundamental. This need arises naturally in every real-world app. This is what the container component is for. But the problem is that almost always you want to nest one group inside another without introducing additional padding.
I'm sure every person working with Retool will be happy if containers could have zero padding. I'm not talking about custom padding. Only a switch that will let us choose to remove the padding.
Retool team, please, don't let this get buried with all the other feature requests. I know everyone considers their problems the most important, but this one is something all of us will benefit from.
I’ve had the exact same issue. I sometimes want to use a container as the equivalent of a div component in html and just use it as a way to group components together and dynamically control the visibility of the component group.
It can get pretty ugly if I have multiple nested containers. The alternative is to set visibility per component which is not DRY and harder to reason about.
Hi @vanelov, @rhinck, @Jeje, @msd5079, Thanks for requesting this functionality on our forum! I've passed along your feedback to our engineering team. We do have our sights on expanding the styling in Retool, but I can't offer an ETA for this at the moment. I'll reach back out on this post to let you all know if we add support for configurable component padding!
I'm also in need of this, I'm disappointed to come into a 7-month old unresolved issue that has a very basic fix (literally just add a toggle to remove all paddings, to start).
This is great feedback—we're actively looking into enabling customizable padding in containers, keep your eyes peeled for something in the next month or so!
/* Works on 2.124.0 */
/* Remove padding and border radius from direct children components of container1 */
#retool-widget-container1 > div > div > div > div > div > div > span > div > section > div > div > div {
padding: 0px !important;
}
#retool-widget-container1 > div > div > div > div > div > div > span > div > section > div > div > div > div > div > div > div > div._hPGyJ {
padding: 0px !important
}
I up-vote this feature. I'm also using Flutterflow and it has an intuitive UI that shows you the top, right, bottom and left padding settings you can apply, along with a lock. This can absolutely allow me to spend less time trying to 'fit' things nicely.
For Mobile, containers have had 0-padding options for a while, I think. Has anything changed on that level?
On the padding issue, the biggest challenge for me is the default padding of collections/patterns and especially custom collections (in Mobile). The default padding, and the lack of custom padding), forces layout changes that doesn't align with other elements, like a normal list collection.
In the above screenshot, the top collection is a normal list collection, and the bottom a custom collection. I needed a custom one in order to have control over the text sizing and color.
The issue is that the custom collection has a default inner padding that doesn't align with the normal list collection.
This is just one example, but there are many other examples, where this alignment issue greatly affects the overall design.
Can we hope for padding options to be added to Retool Mobile collections as well?
They have! I was just posting about them here in case you missed them. Thanks for adding that additional context (and the super helpful screenshot), I see what you're describing now and have brought it to the mobile team's attention
