Bug #9114
closedgroup with long name messes up homepage layout
0%
Description
Please see the attached screenshot. Is there any way to foreshorten the group name if the group name string is too long so that the layout is more even?
Files
Related issues
Updated by Boone Gorges about 6 years ago
To be clear, this is not really an issue with long group names per se, but group names that have very long words in them, so that the browser doesn't know when to break the line.
There are ways to force line breaks, but these changes tend to have adverse effects on the 99% of texts that would break on word endings under normal circumstances. See https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/. Ray, do you know of a way to make this work reliably using only CSS? We could fix with JS but that's pretty cumbersome.
Updated by Raymond Hoh about 6 years ago
I usually go with the ellipsis technique outlined in that CSS Tricks article.
It's a CSS-only approach that works well, but if we do this, we should use a title attribute so the full name of the group can be seen on mouseover. That's not really a mobile-friendly option though.
Updated by Boone Gorges about 6 years ago
- Target version set to 1.12.8
The ellipsis technique as described affects items that would otherwise wrap normally. See attachment.
(Note that you can't test in Firefox, because it line breaks on the slash character.)
If we leave out the white-space: nowrap declaration, it seems to fall back properly. That's probably our best fix.
A title element is probably a good compromise. We could also consider removing the ellipsis declaration on mobile.
Ray, if this is easy for you to do, please go ahead, otherwise assign it to me or Dan and we'll do it for the next maintenance release.
Updated by Boone Gorges about 6 years ago
forgot screenshot
Updated by Raymond Hoh about 6 years ago
- Status changed from Assigned to Resolved
Fixed in https://github.com/cuny-academic-commons/cac/commit/cd9ec16927d21a05d06c9a38905ae2538fe5eef4
Decided not to go with the ellipsis method.
I tested with white-space: break-word as well as width: auto to fill the width of the widget container and this fixes the problem.
Tested on all browsers and this appears to work well.
Updated by Boone Gorges about 6 years ago
- Related to Bug #9149: Doc listing layout issue added