CSS label style Vaadin

Question

I'm trying to make inline editing in Vaadin. I think that good way to achieve that is styling text fields to make them look like labels, and switch to style of text field when focused.

Is it possible to style text field to look like label? How can I make it if it's possible?

Do you have an example of what you want it to look like? I'd assume it's possible, but "label" is pretty broad unless you're talking about HTML '' — , Feb 13 '13 at 15:05
I have grid layout witch fields like: "name", "surname", "phone" etc. and values of them, I want to click on text, for example "John" and "John" should become editable text field, after focusing another one "John" should be plain text again — akuzma, Feb 13 '13 at 16:16

score 5 · Accepted Answer · edited Sep 18 '13 at 13:36

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.

score 1 · Answer 2 · edited May 23 '17 at 11:56

1

Text field is represented by this HTML:

<input type="text" class="v-textfield v-widget" tabindex="0" style="">

What about applying this: How to remove border (outline) around text/input boxes? (Chrome) on "v-textfield v-widget" CSS?

edited May 23 '17 at 11:56

Community

1
1

answered Feb 17 '13 at 12:33

Ondrej Kvasnovsky

4,592
3
30
40

CSS label style Vaadin

2 Answers2