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!
- 8,409
- 22
- 75
- 99
- 11,736
- 20
- 78
- 137
-
This may help: http://stackoverflow.com/questions/5241369/word-wrap-a-link-so-it-doesnt-overflow-its-parent-div-width – David Levesque Aug 15 '13 at 21:17
-
@DavidLevesque: I'll give the pre-wrap a try next time the project is in front of me, but I have a feeling it won't work. Since the label is actually changing it's size to fit the text in, I don't think changing the way it's wrapping will help since the label will just be the size it needs to not to wrap. I'm guessing I just need to find a way to force of the size of the Label not to expand. Thanks for the suggestion though. Again, I will still give it a try. – golmschenk Aug 15 '13 at 21:40
-
@DavidLevesque: I gave the pre-wrap a try, but without success. It still extends the label as before. Thanks for the suggestion though. – golmschenk Aug 16 '13 at 18:24
2 Answers
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.
- 683
- 1
- 5
- 13
-
Thanks for the suggestions. The size for the labels and cells is already set at a fixed (100%) size. Which you would expect would mean they would never get larger than the width, but the labels still do resize to a larger size then the 100% space of their parents. I suppose I could use `overflow-x` on the cell but that wouldn't be my favorite solution. Surely there must be a way to prevent the label from resizing in this way, even if it meant a custom label class. That wouldn't be my favorite method either, but it should be able to work if I can't find something else. – golmschenk Aug 18 '13 at 00:48
-
Well the thing is, ignoring GWT completely for a moment, how would you want this solved in theory? Like, if you have long links, what do you want to happen? Do you want, say, only words above a certain length to break or such? – Marconius Aug 18 '13 at 02:33
-
I would want a word moved to the next line if it can't fit in the remaining space on the current line, and then if it's longer than the entire width of the line the word should be broken onto two lines. The answer I posted accomplishes this. Thanks for the suggestions though! – golmschenk Aug 18 '13 at 19:58
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.
- 11,736
- 20
- 78
- 137
-
1Ah, makes sense! As an improved solution, if you're using `CssResource`, you could use `@eval` to do these calculations in your CSS instead of having to do it in code! – Marconius Aug 18 '13 at 20:33
-
@Marconius: I'm not using it currently, but that definitely sounds useful and I'll be sure to look into it. Thanks! (You deserve a thumbs on on your answer for this info) – golmschenk Aug 20 '13 at 00:06