TextField without borders

How should I modify the css of my theme for the texfields be drawn without any border?(like label)

TextField textfield =
    new TextField("TextFields Without Borders (TFWB)");
textfield.addStyleName("tfwb");
textfield.setValue("This TextField has no borders.");

Uh, where did the smiley come from...oh, B )....

Anyhow, then the CSS. Notice that you'll have to remove the default background for TextField, which has a shadow, etc.

.v-textfield-tfwb {
    border:     none;
    background: white; /* Has shading image by default */
}

See the example.

Thank you!!

Marko Grönroos:

.v-textfield-tfwb {
    border:     none;
    background: white; /* Has shading image by default */
}

That unfortunately only gets you halfway there, since Safari and Chrome (and all other WebKit based browsers) will still show the background and border. That's because they use the border-image CSS3 property, and that will need to be overridden as well in order to make the text field transparent. Here's how:

.v-textfield-tfwb {
  -webkit-border-image: none;
}

But there's a more simple solution for this: just call TextField.setReadOnly(true), and you get a field that looks like a label.

One more important note: since the underlying HTML element is still the same INPUT, it will not grow with its content (or wrap to new lines), so if your text is longer than the field, it will be cut off, making it look very broken and the user has no way of knowing that there is more content hidden behind the field's view.

This is why we're planning on reverting the read-only styles in Vaadin 7, so don't rely for it to stay this way.

My final suggestion for this issue is that you actually change the field to a Label when you set it to read-only. If you wish to place it inside a Form, I suggest you take a look at Henri's excellent CustomField, which could wrap all this functionality behind a nice API.

Thank you very much!!

In my app the TextField is inside a layout with a background image and the Layout is inside subwindow .
The textfield shoud be editable.

Thank you again for your help!!

Hi:

Is the TextField always resizeable by default?...I have textfields in a table that I want set as non-resizeable and I haven't find an option for that....how should I do that?

regards,

Hugo

Hugo H Hanisch: Hi:

Is the TextField always resizeable by default?...I have textfields in a table that I want set as non-resizeable and I haven't find an option for that....how should I do that?

regards,

Hugo

To my knowledge, that is a webkit-only feature. You should be able to disable it via CSS. Check for example this StackOverflow question.

Risto Yrjänä:

Hugo H Hanisch: Hi:

Is the TextField always resizeable by default?...I have textfields in a table that I want set as non-resizeable and I haven't find an option for that....how should I do that?

regards,

Hugo

To my knowledge, that is a webkit-only feature. You should be able to disable it via CSS. Check for example this StackOverflow question.

Thanks for your answer, it was very useful!!!!