The module description on the page /admin/modules doesn't break in a new line causing layout problems.

This could be fixed if we allow the text to be wrapped. This would cause that the text would then break into 2 (or even more) lines which is then hidden and only readable if one toggle the description text with the little arrow beside it. I can provide a fix for that.

Attached are one screenshot with the problem and two more with the suggested solution.

Is there a limitation on how long these module descriptions can be?

Comments

fhaeberle created an issue. See original summary.

ajits’s picture

Title: module descripion doesn't break resulting layout bug » Module description breaks resulting layout bug

Correcting title. Apologies in advance if this is not correct!

fhaeberle’s picture

Title: Module description breaks resulting layout bug » module description text doesn't break in new line resulting layout bug

No it's not correct. I mean the text doesn't wrap / break the line. but you're right - a bit confusing, changed the title.

idebr’s picture

Status: Needs work » Active

Setting status to 'Active', since the issue has no patch file attached. See the issue queue handbook.

fhaeberle’s picture

As we are working with tables here, text-overflow: ellipsis isn't working like intended. Tried a few things with table-layout: fixed and display: block to make it worked but failed. Also, setting min-width or max-width would mean hacking the table and would not be a good approach – but also tried that without getting it to work. In order to fix the broken layout which gets generated based on the too much width taking table (caused by the description text) I would suggest removing white-space: nowrap and text-overflow:ellipsis. I provide an patch for that.

fhaeberle’s picture

Assigned: Unassigned » fhaeberle
mahenkvyas22’s picture

just change .system-modules details class property white-space: nowrap; to white-space: normal; and its working fine.This css system-admin--modules.css file.

fhaeberle’s picture

@Mahenkvyas22 Can you provide a screenshot? It's not working on latest Chrome/Firefox/Safari on my site with correct generating ellipsis but cut's the text and wraps it into a new line. I want to achieve adding the ellipsis but I think that's not possible with only CSS so we have to remove both the text-overflow and the white-space property. Setting white-space: normal isn't nessesary because that's the default so we can get rid of the property.

mahenkvyas22’s picture

StatusFileSize
new92.67 KB
new100.54 KB

@fhaeberle this is screenshot of module page.

fhaeberle’s picture

@Mahenkvyas22 Alright, as I suggested before you also only could get it work with the simple overflow: hidden and no ... ellipsis. Your screenshots doesn't fix the code like it's intended to work. So text-overflow and white-space can completely be removed as we could not get ellipsis ... to work.

fhaeberle’s picture

Status: Active » Needs review
StatusFileSize
new822 bytes

This patch should provide a fix for the too long module descriptions resulting broken layout.

fhaeberle’s picture

Assigned: fhaeberle » Unassigned
huzooka’s picture

StatusFileSize
new131.38 KB

What if we just let the summary text overflow and break in so many lines as it needs?

Hiding text is a bad practice for accessibility reasons and this fix is only temporary imho.

Multi-line details summary on system modules page

fhaeberle’s picture

@huzooka. You are right. If we wrap the text in two (or even more) lines, it has to be tested if it works with the current table layout. We have to think about edge cases like really long descriptions too (like 3 or 4 lines).

huzooka’s picture

@fhaeberle: Multiline summaries have to work even if their parent details element is expanded (and they do work now as well), I won't worry about that. :)

fhaeberle’s picture

Status: Needs review » Needs work
fhaeberle’s picture

@huzooka I'm going to improve my patch.

fhaeberle’s picture

Assigned: Unassigned » fhaeberle
fhaeberle’s picture

StatusFileSize
new639 bytes

I created a new patch based on @huzooka 's suggestion in #13. Please review.

fhaeberle’s picture

Status: Needs work » Needs review
fhaeberle’s picture

Assigned: fhaeberle » Unassigned
huzooka’s picture

Status: Needs review » Reviewed & tested by the community

Let's do this!

  • huzooka committed 71a25f6 on 8.x-1.x
    Issue #3055399 by fhaeberle, Mahenkvyas22, huzooka: module description...
huzooka’s picture

Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.