Word wrap inside gridLayout


I have a Table which has two columns. In one of the column i have a vertical Layout. The virtical layout has a grid layout as its first component. The grid layout contains two cells. In the First cell of the grid layout i would display an image and in the second cell i would like to display text which is very long. This long text is getting clipped. I would like to wrap this text to the next line if it overflows. I have the following CSS which is not working at this moment. Any suggestions to resolbve this.

word-wrap: break-word ;

Instead of word-wrap, use the white-space property, which controls how whitespace characters are treated:

.v-gridlayout-threat {
white-space: normal;


This should fix it. But the problem in the first place sounds like you have an undefined width on the grid layout, which causes the contained Label to revert to undefined width as well (which is by default non-wrapping).

Use the ?debug window and click “Analyze layouts” and you’ll get a report showing where the sizing errors are in the layouts.

Thanks for your reply. Actually the vertical layout that contains the gridlayout has a size of 625px. I tried setting the same size to the grid layout but it seems it has an effect of seeting each cell size to 625px don’t know how to resolve this. But i managed to resolve this by adding the size to the labels that are being added to the grid.