What I’m trying to do:
I’m trying to use links in a control panel but minimize the padding and/or margins… I’ve tried this before…
What I’ve tried and what’s not working:
I make two roles:
thick-link and thin-link
here’s my css in my theme.css:
.anvil-role-thin-link {
padding: 0 !important;
margin: 0 !important;
}
.anvil-role-thick-link {
padding: 20;
margin: 20;
}
Clone link:
share a copy of your app
https://anvil.works/classic-build#clone:2EJZBVQJJFXR3ZNW=LGQ4P4ZRVEGOXZDI7PUH47MU
That’s not a clone link, just a link to your app:
Thanks for the heads up, fixed
So the issue was that your padding and margin values didn’t have any units (px, %, etc.) Once I added px or % it made changes to the padding/margin.
Also, the way it looked after that made me wonder if you really wanted to change the font size of the links, so I also did that in the clone below
OK, so I see that change taking affect, however, I still see ‘more’ padding below the link text than I do above… and with zero… should it not be closer to the component boundary? Is there some default such that I need to go negative? also… Im testing padding: 0px 0px 0px -5px;
This is seeming to have no effect at all
you might find this article helpful:
if you inspect the element in devtools, you’ll see where the padding is coming from:
So we need to override this style
.anvil-role-thin-link>.link-text {
padding: 0;
}