Trying to center a simple role in CSS theme. Text align not working? Did I do something wrong here?
Not a direct answer (I’m no CSS expert), but did you know you can centre the text of a label inside the IDE by setting the align property?
im trying to create a role is Css, because you can assign that role to any label,
that will apply basically a premade format. Much easier for modular designs and faster too. Everything works so far except center,
So I started a new app, made a label, set the label align property to center like @david.wylie said.
Then I ran the app outside the ide and inspected it and here is the relevant DIV that Anvil generated:
<div class="align-center anvil-spacing-above-small anvil-spacing-below-small left-icon has-text anvil-label anvil-inlinable anvil-component belongs-to-XKDJQA" style="text-align: center;"><i class="anvil-component-icon left left-icon"></i><span class="label-text">hi mom</span><i class="anvil-component-icon right left-icon"></i></div>
style=“text-align: center;”
…is what it contains, so yeah, is this a bug?
(I am also no css wizard, which is why I use anvil to begin with)
So i have another app, which i copied some of its CSS, its align center seems to be work, i copied the exact same and still not working. But just for align. Hmmmm
Hi all,
What’s going on here is that the align property from the UI overrides whatever you’ve set as part of the role, which is why you’re seeing everything else from the role be applied apart from the alignment.
The workaround to set the align property programmatically is to do it directly from code.
ahh ok, so if you were programmatically setting the role, you would just have to set the align property at the same time.
You can also try adding !important to the end of the CSS in the role, to try to get it to override the defaults. That sometimes works for me, sometimes not.
e.g.
.anvil-role-label-1{
text-align: center !important;
}
2 Likes
That worked! Thank you so much!
1 Like