Html and Roles - trying to 'fix' a label

Anvil Q&A
1

In my HTML I’m manipulating this code for a new Role, I see this in the other role elements, what is the difference and how do they affect the role?

I have a label where the text is slammed up against the left side of the label box, like this:

image

Seems like no matter what I set the left padding-left to… it has no effect.

.anvil-role-peertext {
font-size: 14px;
border-width: .1px;
border-top-style: solid
}
.anvil-role-peertext > .label-text, .anvil-role-text .link-text {
padding-top: 0;
padding-bottom: 0;
border-color: red
}

2

I may have stumbled upon the solution, the label also has a padding-left that seems to have moved that text to the right a bit

3

I’m not exactly sure “they” refers to here; however, here is a Google search on the > sign in CSS that may help. It did for me.

Also, I don’t actually see padding-left anywhere in the code you showed, in case that was an accidental omission.

padding-left: 50px; works for me in terms of controlling left padding.

Perhpas something about your role is not set up properly.

Here is an app that shows left padding working. See if you can set up your roles accordingly.

4

I think I failed to add the ‘px’

5

Googling really helps for this kind of thing. It is my “go to” method of checking syntax especially for something like CSS which I am not that familiar with.