How to change padding on role

Anvil Q&A
1

What I’m trying to do:
I am trying to decrease the padding of my TextBox, to fit in more text with my limited space, with a custom role. I am not that experience with css so I am kind of just taking shots in the dark. But saying this I do have a hunch that my solution lies in the styles.css file (that I either don’t have access to or cant find)!
image
Trying to get 4 numbers in a TextBox this size.

What I’ve tried and what’s not working:
I have made my own custom role named ‘input-small’ and added some code (seen below) to the theme.css file.

Code I Added (Line 926):

/* CUSTOM - input-small role */
textarea.anvil-component.anvil-role-input-small, input.anvil-component.anvil-role-input-small, 
.anvil-component.anvil-role-input-small select, .anvil-datepicker.anvil-role-input-small input {
  border: 0px;
  border-radius: 4px;
}

Edited Code Scr:
The following screen shot is what I have tried to edit to achieve my goal. Specifically, I have tried editting the border-radius: and the border: (from example code).

image
image880×307 43.6 KB

If you have any ideas on how to fix this or maybe if this cannot be fix to support this possible feature request.

Thanks!

2

Hi @CoenD,

If what you want to modify is the padding of your component, then border and border-radius are not the right properties, padding is! Try playing around with that property instead, and see if it does what you are looking for.

I’d also recommend taking a look at our Styling Apps with CSS tutorial. Apart from outlining some CSS basics and linking to some resources, it runs you through how to access DevTools, which might be quite helpful to play around with things in real time before changing them in the theme.css.

1 Like
3

Thanks for letting me know about the padding, but do you know where it would most likely work for me to put it to effect my custom role?

4

I don’t know the answer to your question @CoenD. I’m going to pile on instead.

Often times in this situation, for each component I navigate to the Layout screen in the Properties tab and set the spacing_above and spacing_below to none. This is pretty painful to do component-by-component (though @CoenD if you haven’t done this it’s a place to start).

image

This helps but typically I still find a lot of extra white space I’d like to get rid of.

@patricia, can you please provide a bit of an explanation as to how the spacing_above and spacing_below work? Can these be overridden with a custom role, or are these properties somehow applied AFTER a role is evaluated for a component?

1 Like
5

Sorry @danbolinson but could provide a bit more information about this ‘Layout screen’ and its properties tab, as I am having some trouble finding it.

NVM found it.

6

Hi, @danbolinson,

The spacing_above and spacing_below properties affect the margin of a component, rather than the padding. They are set on theme.css, and that looks something like this:

.anvil-spacing-above-small { margin-top: 4px; }
.anvil-spacing-below-small { margin-bottom: 4px; }

So I think for most components you should be able to override them using a role if you wanted to, by writing something like this:

.anvil-role-no-spacing {
  margin-top: 0px;
  margin-bottom: 0px;
}

Although you could also just set different spacing-above or spacing-below values.

Hope this made sense!

2 Likes
7

I think targeting the .anvil-text-box class should do it, but I still recommend inspecting the page in DevTools as described in the tutorial I linked above, to make sure that’s actually what you want to change.

1 Like