CODEWITHSUNDEEP
javagwtword-wrap
golmschenk
golmschenk

Reputation: 12404

GWT - Label not wrapping text properly?

I've got Labels within the cell of a FlexTable inside of a ScrollPanel which is inside of LayoutPanels. The size of the ScrollPanel (and it's parent LayoutPanels) is set dynamically based on the size of the window of the user's device (so exact CSS sizing is not used). The FlexTable, it's cells, and the Labels are set to have a width of 100%. Also, the FlexTable is set to have a fixed table layout. And the Labels are given the word-wrap setting of break-word. In most cases, this works fine. Sentences with short words are wrapped to the next line without a problem and Label remains the same size as it's containing table cell. However, when a word would need to broken onto two lines to fit (which happens often since links to pages are frequently placed here) the Label's width is automatically extended beyond the size of the cell that contains it. I know this is the result of GWT resizing the Label by itself, but I'm not sure how to prevent this. I've tried setting the word-break to break-all, but this results in short words reaching the end of the line to be broken (like "this" into "th" and "is") which is just silly. Is there anyway I can force the GWT Label to only be 100% of the width of it's containing cell and not let it extend beyond that while still keeping this setting dynamic? Thank you much!

Upvotes: 0

Views: 1762

Answers (2)

golmschenk
golmschenk

Reputation: 12404

Apparently the percentages causes the problem. If you specify a px value for the width the long string will wrap once it reaches the limit. Of course since I'm dynamically sizing, I need to get this px value in a more complex way. The way to do it is to use Window.getClientWidth() to get the width of the user's screen, then every time you would use a percentage of this, you need to manually compute the px value based on the percentage you would use in the CSS (since getting 33% of 100 pixels gives you 33 pixels, you need to manually check for when an extra pixel should be added in so you're not missing any), then for the scroll panel you can get the panel width excluding the scroll bar by subtracting NativeVerticalScrollbar.getNativeScrollbarWidth() from your current panel width. This way worked well for me since I was already calculating the pixel size for each panel based on the window size down to the scroll panel anyway.

Upvotes: 0

Marconius
Marconius

Reputation: 713

I actually don't think there's a good solution to this; either you only allow breaking at normal points (white spaces) or you can break inside words, but then there's no way to prevent breaking of short words with just CSS.

The best suggestion I can give, since links are causing problems, is to shorten links somehow, maybe only display a finite number of characters; if the links are clickable, this shouldn't be a huge problem.

Alternatively, you could set a fixed size for the labels or the cells (can still be in %) and use overflow-x to hide any bits of text poking out if there's a really long word that cannot be broken.

Upvotes: 1

Related Questions