vaadin css,CSS label style Vaadin

You can override the Vaadin styles in your own theme. If you don't have a theme yet, create a directory under the VAADIN dir called themes and create a subdirectory in themes by the name of your theme, eg. mytheme.

Vaadin 6:

Call setTheme("mytheme") in your application class

Call myTextField.setStyleName("labelstyle"); in your code

Create styles.css in your new theme directory.

Add the following in styles.css:

styles.css:

@import "../reindeer/styles.css";

.v-textfield-labelstyle {

background: none repeat scroll 0 0 #F5F5F5;

border-color: #F5F5F5;

border-image: none;

border-left: 1px solid #F5F5F5;

border-radius: 3px 3px 3px 3px;

border-right: 1px solid #F5F5F5;

border-style: solid;

border-width: 1px;

}

Vaadin 7:

Add @Theme("mytheme") annotation in your UI class

Call myTextField.setStyleName("labelstyle"); in your code

Create styles.scss in your new theme directory.

Add the following in styles.scss

styles.css:

@import "../reindeer/reindeer.scss";

.mytheme {

@include reindeer;

.v-textfield-labelstyle {

background: none repeat scroll 0 0 #F5F5F5;

border-color: #F5F5F5;

border-image: none;

border-left: 1px solid #F5F5F5;

border-radius: 3px 3px 3px 3px;

border-right: 1px solid #F5F5F5;

border-style: solid;

border-width: 1px;

}

}

Compile your theme by calling java -cp '../../../WEB-INF/lib/*' com.vaadin.sass.SassCompiler styles.scss styles.css in your theme directory

This little trick will give you a Label-like TextField which turns into a normal TextField when focused.

Note that this will only work when using Reindeer theme and the default background color #F5F5F5. You'll have to tweak it a bit if you are using some other theme or the background color differs from the original.