Trying to adjust the height of a link with role

Anvil Q&A
1

I’m trying to adjust the padding, or height of the link shown in the screencap below:image

In the assets/role - nothing I mimic from other roles seems to be affecting this. My goal is to reduce the padding underneath the text of my link. The role i’m using is this:

.anvil-role-thinrow {
  margin-top: -10px !important;
  margin-bottom: -10px !important;
  padding-top: 2px;
  padding-bottom: 2px;
}
2

Just a question: Is the link component set to your custom role in the IDE?

3

Yes, it is set to that custom role. And, I can tell that it ‘works’ because I added the bottom border from a header to see if it was all working, and it does, I see the ‘line.’ I wonder if link settings elsewhere in the theme.css are overriding what I’m trying to do

4

I’m not quite sure. It works for me using the CSS that you have above. I put my CSS at the top in my assets file.

sc

All I can suggest is to check your setup again for your custom role in case there are typos, or the link is just set to another role accidentally. The CSS should work at least in my testing.

5

I have a feeling it’s to do with the fact it’s in a flow panel and/or includes an icon.
is the design view the same as the live view?
Do you have a minimal example to play with the css…

edit - how about this (at the bottom of theme.css)

.anvil-role-thinrow .link-text {
  padding-top: 0;
  padding-bottom: 0;
}
1 Like