long text inside a Label element

hi.

i’m quite new to vaadin, so i have a question.

i have a 2x1 grid layout containing the following data: the first column contains an image and the second one contains vertical layout with the details fields of the image.

here is the code:


 GridLayout dgl = new GridLayout(2, 1);
 Label img_full = new Label("<img src='"+m.getPoster_big()+"'>");
 img_full.setContentMode(Label.CONTENT_XHTML);
 dgl.addComponent(img_full, 0,0);
						
 VerticalLayout descr = new VerticalLayout();
 descr.addComponent(new Label("Year: "+m.getFilmYear()));
 descr.addComponent(new Label("Description: "+m.getDescription()));

 dgl.addComponent(descr, 1, 0);
 details.addComponent(dgl);

where m is a bean and details is a window.

the problem is that if the length of description text exceeds the width of the grid row, it appears as a single line of text coming out of the window bounds.

maybe someone knows what’s the problem?

thanks.

My first guess is that you need to specify an explicit width for the GridLayout. Since Labels are by default 100% wide, they should wrap, but if the Label is placed inside an undefined wide layout, the Labels default width is reduced to undefined as well (since that’s what 100% of undefined is), making it stick to one line (nowrap).

So try GridLayout.setWidth(“400px”) or GridLayout.setWidth(“100%”) for instance.

If setting the width is out of the question, another workaround then is to override the “white-space: nowrap” setting with CSS. You need to add a style name (and a custom theme, too) for the Label in order to do that:

// Java
Label.addStyleName("wrap");

// CSS
.v-label-wrap {
    white-space: normal;
    }

this helped. thanks a lot.

Hi Jouni,

How will we implement this?
ie, How will we add the custom theme ?


Regards,
Niyas

Hi Jouni,

I tried the following example that you have provided in a similar thread.

HorizontalLayout layout = new HorizontalLayout();
layout.setWidth(“100%”);

Label y = new Label (“this is fix size label.”);
y.setWidth(“100px”);

Label z = new Label(“this one does wrap now.”); // 100% wide by default

layout. addComponent(y);
layout. addComponent(z);
layout.setExpandRatio(z, 1); // Accomodate all remaining space for this label Z

This works for small texts , but when i have a text like the follwing

Label y = new Label (“jdkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkcvmcmvxmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmsdkfklsdjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjf”);

( just as a sample for a long text )

this example fails .


Regards,
Niyas

Hello all!

Unfortunately it is not possible to create a new topic… Always an erorr comes up that I have to fill the topic and body. So I found a post which maybe is similar to mine… Sorry for that…

After migrating vaadin 7 to 8 I have the issue that a content label is not automatically breaked into a new line after it reaches the end of a fixed container…

Does anybody know what do I have to change?

Best Regards,
Thomas

I tried also the last days to handle this issue with setting different content modes, alignments or sizes but unfortunately I had no luck…