multi line capture in a text field

I would like to add the following capture text in a textfield:

TextField tf = new TextField ("Enter : \\n NEW for new data \\n EDIT for edit data <br> DEL for delete data");

And work as Label TEXT

I’ve tried with :

TextField tf = new TextField ("Enter : <br> NEW for new data <br> EDIT for edit data <br> DEL for delete data");
 td.setCaptionAsHtml(true);

and it works fine… as Label HTML But I don’t like to open HTML.

Is there an intermediate way like the Label PREFORMATED

Label textLabel = new Label( "Text where formatting characters, such as \\n, " + "and HTML, such as <b>here</b>, are quoted.", ContentMode.TEXT);
Label preLabel = new Label( "Preformatted text is shown in an HTML <pre> tag.\n" + "Formatting such as\n" + " * newlines\n" + " * whitespace\n" + "and such are preserved. HTML tags, \n"+ "such as <b>bold</b>, are quoted.", ContentMode.PREFORMATTED);
Label htmlLabel = new Label( "In HTML mode, all HTML formatting tags, such as \n" + "<ul>"+ " <li><b>bold</b></li>"+ " <li>itemized lists</li>"+ " <li>etc.</li>"+ "</ul> "+ "are preserved.", ContentMode.HTML);

Mark those components with a special CSS class name where you want to use a multi-line caption:

textField.addStyleName("multi-line-caption");



See the full sample on vaadinfiddle.com

and then define a theme rule to respect the contained newlines:

.v-caption-multi-line-caption {
  .v-captiontext {
    white-space: pre-wrap;
  }
}



See the full sample on vaadinfiddle.com

Hello Jonni,

Thanks for the Fast answer and also for the fonderfull tool used for the explanation. You show me also where to go for the extra CSS modification. That was not clear for me at the first reading of vaadin documentation.

I’ve also try that manipulation for a FormLayout, but seems not working fine


See the full sample on vaadinfiddle.com