I have several columns on a row. Each column has a label component. I want to manipulate the labels appearance.
I went to the row component and entered a value for the css class list.
I edited style.css file and added
.Selectors {
text-align: center;
font-weight: bold;
}
I now have my label text centered, but not bold. Any other styling I put in seems to be ignored also.
A label does not have a css class list entry field in KUIB. What am I supposed to be doing to affect the visual properties of my label components?
This seems to be working, don't know why it didn't before. I have noticed that sometimes it seems I have to preview a couple times before it starts working, maybe I'm somehow out of sync.
Hi Greg,
The best way to achieve the desired styling is to add CSS class for that particular row and then use it to target the labels inside, e.g.
.my-labels-row label {
font-weight: bold;
}
This CSS rule can be defined either on View level (by Edit CSS button for each view) or in the "\app\src\styles\app\app.custom.css" file if you want to reuse the same style across views:
When you hit Save, the dev server (if it's turned on) refreshes the page automatically and you'll have the changes.
Note: In order to center the labels you'll need to either set them to width 100%, or set this property to the columns that hold the label. This is because, according to CSS specs, text-align works on the contents of the element, not the element itself.
Regards,
Venelin