Hi,
How are you?
I have a gridpanel, and I added text boxes and buttons in the corresponding repeating panel form (inside the grid panel), to add insert, update and delete functionallty.
In the buttons instead of using text, I use the icons.
But, the icons are very small and they still occupy a large space. I’ve used a flow panel to put a couple of them together, but still they are too spread for the size of the icons.
I haven’t found any property of the button that allows to set the dimensions of the button/icon, so my guess is this is probably done through css.
Now, if I’m right, how do identify the correct css properties to modify, without having to enter in trial and error mode.
There are a lot of button and icon css properties in the css file.
If I’m not right, please help me understand how to finetune the components in the form, to place things where I need them, and give them the correct size for fitting in the space they have.
I’ve also tried putting a linear panel inside the flow panel, but this does not work; you can modifiy the dimensions of the linear panel, but the dimensions of the icon remain unchanged.
Thank you!!
Warm regards
Ricardo
As far as I know, CSS is synonym of trial and error mode! 
Said that, something that helps is running the app in its own tab, so you don’t have the IDE bothering you. Then right click on the icon and click on inspect. The dev tools window will open, showing both the html and the css. You can explore what styles are affecting whatever you are looking for. You can enable or disable each rule, you can change their values or you can add new rules.
When you find out the rule that you don’t like, search that in the css file.
And if you are like, the trial and error is a little shorter.
On the top left corner of the Elements tab of the dev tools there is an arrow that allows you to select any element visible in the page (in Chrome in Windows).
2 Likes
Thank you Stefano!
I agree there’s a trial and error component in beautifying a UI, but usually that is when working on one element and not when you don’t know where to start (my case 
)
I think that your advice will narrow down a lot the search for the right element to modify. So thank you!!
Still a lot of front end programming knowledge for a non front end programmer (me 
)
I will give it a try, to see if I can get the grip of it.
I guess, I will end having to sharpen a little bit my really poor skills in HTML and CSS. 
Warm regards!!
Ricardo
1 Like
This role should remove unwanted padding on most of the anvil components (like Links, Buttons, Labels, Textbox etc.)
.anvil-role-nopadding-comp {
padding: 0px !important;
}
.anvil-role-nopadding-comp>* {
padding: 0px !important;
}
This code doesn’t really identify the problem but simply forces a 0 padding for everything inside the component. So if you want to go for a proper fix, you can take @stefano.menci advice
1 Like
Hi,
Thank you very much for your comments on the topic!!
Maybe I can use your solution while I learn a bit more about CSS and front end survival skills 
Warm regards!
Ricardo
1 Like
