Hey so I have some nested components (container inside listview) and this increases the margin to an unnecessarily large extend. Can someone help me to reduce that margin?
So, to give some more context I attached an image. There should be a way to modify this with CSS classes right? Any help would be appreciated
.
Hello!
You could potentially use a text component as HTML with the below CSS within it:
<style>
.retool-grid {
padding: 5px;
}
</style>
Just drag a text component into your canvas and then select “Render as HTML” with the above as the value!
Thanks that did exactly what I wanted 
I know there is this post here How to write custom CSS in Retool! but I would really enjoy a more in-depth tutorial of how to change styling like this in retool
I have a stepped container inside a form, and want to remove the form's inner padding (so the stepped container reaches the edges of the form.
So, I removed the padding like this:
._retool-form1 .retool-grid {
--retool-grid-padding: 0;
}
._retool-container-steppedContainer1,
._retool-container-steppedContainer1>div>div {
padding: 0 !important;
}
Unfortunately, The dynamic height of the form is still taking the padding into account- so I am left with empty space at the bottom.
It would be great if a form had a "No padding" option in the editor to account for this.
If possible, containers should not have padding associated with them to reduce complications with javascript height/width calculation. Instead, padding could be applied to one of the child elements retool already creates. Additionally, adding a theme token to control global container padding for all elements would help a lot.
[Edit: reduced snark by 80%]
Hi all, Thank you for sharing your feedback publicly on the forum. We're tracking requests for the ability to configure the padding of components internally. I've added your feedback there so for our engineering team and I'll be sure to update this post if we add support for configurable padding!
