Component properties for Margin and Padding

I see that a similar request has been made a few years ago and added to ‘the list’.

I want to support this request with more details. I love Anvil and Python, and have been working with it for a few years now. But, one of the few frustrations I have with it is that I find myself constantly spending non-trivial amounts of time on getting components to line up and the forced whitespace that comes by default.

The Problem
I am productive when I use Anvil and Python. When web page appearance starts to be an issue, and I am forced to use CSS, my productivity goes way down. And 95% of these CSS modifications have to do with margins and padding to get things to line up.

Here are five components dragged onto a Material Design 3 blank page, with the only changes being ‘solid’ added to the Text.border property and changing the font_size on the last link.

Without CSS/Role additions there is no way to consistently get components to line up or be the same size.

What Doesn’t Work

  • Layout.spacing_above and below work in increments of 4 pixels. More control is needed. And one of the problems here is that buttons have a padding of 10 while links, text, and labels have padding of 8. The text box has an additional margin.bottom of 4.
  • Adding CSS and a Role if the component already has a Role (like ‘outlined’)

Possible Solution

  • Like the Text.font_size, Appearance.background, and the other existing component properties, add ‘padding’ and ‘margins’ properties to allow overrides of CSS specifications.

I understand that CSS can be used to make a more elegant solution, but sometimes changing CSS that you didn’t develop (and aren’t familiar with) can be tedious and change the appearance of the entire site. Being able to quickly remove a couple of pixels of white space using a component property would be extremely useful and increase productivity.

2 Likes

I have also experienced this frustration. I really appreciate you articulating it and taking the time to propose a specific solution.

Not that it’s an ideal solution, but you actually can apply multiple roles from code. Another workaround from code is to tweak things via anvil.js.

changing CSS that you didn’t develop (and aren’t familiar with) can be tedious and change the appearance of the entire site

This observation sparked an idea for a different request.

2 Likes