Change col-padding for a custom component

Anvil Q&A
1

I would like to lower the padding on the side of the components of a custom component from the default 15px to 5px:

.anvil-panel-col>.col-padding {
    padding: 0px 5px;
    position: relative;
}

How do I do that?
If I do it, will it affect all the components in the form where the custom component is loaded?

2

Not sure, but could you maybe create a role and either add that to the component, or if you want to do all components inside a container, add the role to the container instead and make the CSS target that and its contents?

Not tried it, just thinking out loud …

3

Role?
What is a role?

All I can find in the documentation is this:

role - themeRole - Choose how this component can appear, based on your app’s visual theme.

4

Apologies, I should have explained in more detail.

A role allows you to create custom CSS classes and attach them to components in the designer.

To try it out, do this in a new project :

  • go to Themes -> Assets in the project manager.
  • you will see a drop down to choose an asset. The last one is “Configure Roles…”, choose that one.
  • create a new role (should be reasonably obvious) - call it “my-test-role”.
  • now select “themes.css” and create this :
.anvil-role-my-test-role {
    background-color: yellow;
}

Basically you prefix the role name with “anvil-role-” in the CSS definition.

  • now drag a Label onto the form, and under “Appearance” in the properties, you will see a drop down called “Role”. Your new role should be the only entry. Choose that.

You should now see your label change background colour. That’s a trivial example, but it shows how they work.

5

Thanks, now I understand what is a role. They seem to be powerful, it’s weird that they are not documented.

Unfortunately I tried and it doesn’t help with my problem.

I created two roles:

.anvil-role-padding5 {
  background-color: yellow;
  padding: 0px 5px;
}

.anvil-role-padding50 {
  background-color: green;
  padding: 0px 50px;
}

This is the result:

image

They green one adds 50px to the normal padding, but the yellow is not able to remove the 15px padding of its parent. The two labels and the text box are on a form. I tried applying the roles to the form, but nothing changed.

I would like to control the gap highlighted in red.

6

I think you might want margin rather than padding there.

Edit - hmm. might need to play a bit with this. I’ll get back to you …

7

If I inspect the element in Chrome I find out that the culprit is a <div class="col-padding"> that wraps each Anvil component, and if I change the definition of .col-padding from padding: 0px 15px; to padding: 0px 5px; the problem is solved.

The problem seems to be that roles affect the content of the div, not the div itself.

8

This works :

.anvil-panel-col {
  margin-right: -30px !important;
}

but I’m not sure this solves the real problem as it affects all of them.

Still playing …

9

Ok, got it I think …

With a role called “test” having the following CSS :

.anvil-role-test .anvil-panel-col {
  margin-right: -60px !important;
}

Create a column panel (purely as a container) and apply the role to this.
Drop your labels inside the column panel container and the CSS affects them.

Does that help? I appreciate that might not be the right CSS, but it does at least affect just the required labels.

edit - hmm, Labels with text are displayed slightly differently. Still not right …

10

Heads up – you might want to hang about a few days, as we’re beta-ing something that will solve this problem without messing around with CSS!

1 Like
11

…did I hear the word “beta”? :slight_smile:

12

What came of this beta feature?