Vaadin Label text not wrapping

Vaadin 6 / 7 / 8
1

Hi,

This must be myself just being dense but based on what I’ve read on the book of vaadin about getting the text to wrap in a label, I am stuck as to why I cannot get it to do so in my implementation.

[code]
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);
[/code]All of the above is wrapped in a CSSLayout with size se to full also btw. Can anybody spot what I am doing wrong?

Attached is a screenshot of the behaviour I am getting as a result of my implementation.

Thanks for any help.

Joe
16544.jpg

2

Try without the preformatted setting. BTW, those expand ratios will look weird, since they grow the spacing between the components the bigger the label gets. set expandratio only on the middle label, and call setSpacing(true) on the layout instead.

3

Hi,

thanks for the response. I have infact removed the ratios now, thanks tho.

Also unfortunately it was a requirement that is keep preformatted to cater for a particular user input capability, to maintain truely their input.

I do have a solution though, which I wanted to avoid but hey ho it works.

I added my own style tricks:

.v-label-wrap pre { white-space: pre-wrap; word-wrap: break-word; } with

textLbl.addStyleName("wrap"); this does exactly what I want.

Thanks.

4

Joel Shadbolt:
Hi,

thanks for the response. I have infact removed the ratios now, thanks tho.

Also unfortunately it was a requirement that is keep preformatted to cater for a particular user input capability, to maintain truely their input.

I do have a solution though, which I wanted to avoid but hey ho it works.

I added my own style tricks:

.v-label-wrap pre {
    white-space: pre-wrap;
    word-wrap: break-word;
}

with

textLbl.addStyleName("wrap");

this does exactly what I want.

Thanks.

Thank you Joel - this was my fix when others didn’t work for me!

1 Like