Project

General

Profile

Actions

Bug #9114

closed

group with long name messes up homepage layout

Added by Matt Gold over 4 years ago. Updated over 4 years ago.

Status:
Resolved
Priority name:
Normal
Assignee:
Category name:
Home Page
Target version:
Start date:
2018-01-24
Due date:
% Done:

0%

Estimated time:

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

Related to CUNY Academic Commons - Bug #9149: Doc listing layout issueResolvedBoone Gorges2018-01-30

Actions
Actions #1

Updated by Boone Gorges over 4 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.

Actions #2

Updated by Raymond Hoh over 4 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.

Actions #3

Updated by Boone Gorges over 4 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.

Actions #5

Updated by Matt Gold over 4 years ago

thanks, guys.

Actions #6

Updated by Raymond Hoh over 4 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.

Actions #7

Updated by Boone Gorges over 4 years ago

  • Related to Bug #9149: Doc listing layout issue added
Actions

Also available in: Atom PDF