Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Short CSS-Question
Hi everybody,
i´m using the Switch-Addon in my Application. Now i want to change the Alignment of the Switch Widget to center under the caption.
when i change "text-align: left;" to "text-align: center" with firebug, the component is at the correct place. but how can i add this to my css-file?!
.v-widget {
box-sizing: border-box;
display: inline-block;
text-align: left;
vertical-align: top;
white-space: normal;
}
if you want to change it for all Switch components in your app you should use the selector
.v-switch
if you only want to target specific ones use setStyleName or addStyleName on your Component like for example:
mySwitchComponent.setStyleName("centeredSwitch");
Then you can use:
.v-switch-centeredSwitch
to just target specific ones.
If you're using Scss make sure you recompile your theme and clear the Browser cache before testing any change in your style.
If your style still isn't applied check with firebug if the style shows up on the right when selecting the Switch component. If it is and most of the style properties you set are crossed out you need to make your selector more specific or use !important on your property.