How to set border property for card component

Anvil Q&A
1

How to set border property for card component?

1 Like
3

In the Appearance tab in the components properties there is a border that you can specify css borders for most components.

I am pretty sure the card has this property. If not you can use a column panel and style it how you like.

2 Likes
4

this is great advice, I was wondering if you could give me some pointers in making this works because I get no change when i do this:

image
image1186×1040 66.1 KB

5

Try just using 4px dotted

The border property should update the look in the IDE view so if it doesn’t change you have something wrong

2 Likes
6

It appears like you are setting a border on the column panel and not a card. Make sure you have the card selected.

7

I do - don’t I?

I thought a card is a column panel with the role set to ‘card’?

What am I missing?

8

you are DA MAN!!! Thank you it worked!!!

image
image2775×1708 360 KB

1 Like
9

Have you been able to get a bottom border to work?

e.i.

border-bottom-style: dotted;

10

My only solution was to add to the theme.css assest and create new roles:

.anvil-role-bottom_thin_border {
  border-bottom: thin solid;
}

.anvil-role-top_bottom_thin_border {
  border-top: thin solid;
  border-bottom: thin solid;
}

.anvil-role-right_side_border {
  border-right: thin solid;
}

if you’re interested in my solution :slight_smile:

1 Like
11

Styles can also be added to the Native Libraries section, which makes updating theme.css to the latest version easier.

12

Thanks for the tip! Does it need to be html if it is thrown in there?

13

Think of it as writing it in the head section of the HTML page, so you’d surround the CSS with style tags.

1 Like
14

That’s very helpful. Thank you!

A few new questions:

  1. When is the theme.css updated?
  2. Is there a way to make these changes override the single-column.html as well? I copied the ribbon attribute into my native-library section, but it doesn’t override the ribbon attribute in the single-column.html. Do you have a suggested way to do this?

Thanks again :slight_smile:

15

Anvil updates it as needed, I don’t know how often. Now and then bugs are fixed in it, or new features added.

If CSS in the Native Libraries section isn’t having any effect, sometimes adding !important to the end of the line will make it take precedence over other CSS. e.g.

.anvil-role-initial-fill .flow-panel-gutter > div:first-child {
  flex-grow: 1 !important;
}

If that isn’t it, then you need someone who knows more about the classic theme and how to override it.

1 Like