CODEWITHSUNDEEP
javavaadinvaadin7
dapperwaterbuffalo
dapperwaterbuffalo

Reputation: 2748

vaadin label text not wrapping

As it says on the tin.. I cannot get a label's text to wrap. Essentially I am building like a comments panel, user enters a comment and its displayed with timestamp etc.

I want the labels to both display with ContentMode.PREFORMATTED but also wrap.

The layouts of which contain the label are fixed width (100%) as is the label obviously by default, from what I have readin the book of vaadin what I am doing should work?

here is my code snippet:

VerticalLayout container = new VerticalLayout();
rootLayout.addComponent(container);

VerticalLayout comment = new VerticalLayout();
container.addComponent(comment);

Label createdByLbl = new Label(entity.getManagedMetadata().getAttrValue("createdBy") + " said:");
createdByLbl.setId("conversation.comment.username." + repositoryUID);
createdByLbl.setStyleName("conversation-comment-username");

Label createdDateLbl = new Label(entity.getManagedMetadata().getAttrValue("createdDate"));
createdDateLbl.setId("conversation.comment.createddate." + repositoryUID);
createdDateLbl.setSizeUndefined();

String text = entity.getDataNode().getAttrValue("text");
Label textLbl = new Label(text, ContentMode.PREFORMATTED);
textLbl.setId("conversation.comment.text." + repositoryUID);

comment.addComponent(createdByLbl);
comment.addComponent(textLbl);
comment.addComponent(createdDateLbl);

comment.setExpandRatio(createdByLbl, 0.2f);
comment.setExpandRatio(textLbl, 0.7f);
comment.setExpandRatio(createdDateLbl, 0.1f);

Note the container is also wrapped by CssLayout (rootLayout), which is full sized.

I want the textLbl as seen above to display as formatted should the user enter text on separate lines themselves and wrap if they have entered a long paragraph comment.

Here is a picturing showing my dilemma.

example

Any help would be appreciated.

Thanks,

Upvotes: 1

Views: 7009

Answers (1)

erwin
erwin

Reputation: 205

Try with css. For example:

textLbl.addStyleName("wrapLine");

Css:

.wrapLine{
   word-wrap: break-word; /* IE  */
   white-space: -moz-pre-wrap; /* Firefox */
}

Upvotes: 2

Related Questions