In the Extend Page (admin/modules), if the description of any items is more, then the text will go outside the container.

Beta phase evaluation

Reference: https://www.drupal.org/core/beta-changes
Issue category Bug because if the description of modules in the Extend Page is long, it will go out of the container.
Issue priority Major because, as it is a problem of the displaying of description, it affects user experience.

Comments

jhodgdon’s picture

StatusFileSize
new34.33 KB

In Chrome I get nice boxes around the Details elements, by the way. Although some of the items in Extend go past the edges of the boxes:
screen shot of Extend page

internetdevels’s picture

Status: Active » Needs review
StatusFileSize
new444 bytes

Maybe something like this?

jhodgdon’s picture

That fixes the border problem, but not the "outside the box" problem shown in #1, which appears in Firefox with this patch, and Chrome even without this patch. Maybe that should be filed as a separate issue though?

The problem there seems to be that this page has a details element, and within that a div with class "details-wrapper", and within that a table of modules.

Each table row has a cell with the name of the module and a checkbox, and those are working fine. But the right cell has a details element in it. The label for that details element is way too wide for the table, and for some reason, it is just overflowing the outer Details box rather than making the box wider.

The problem may be coming from the #system-modules details element having
white-space: nowrap;
in its CSS, but removing that in Firebug causes all kinds of problems with overlapping text in that area.

I couldn't really figure out how to solve it (not much of a CSS wizard).

internetdevels’s picture

StatusFileSize
new758.76 KB

here is before/after screenshot:

before/after

jhodgdon’s picture

Your "After" screenshot shows a "..." instead of the descriptions going past the end of the box. Mine is as in #1, in Firefox, with the patch.

I am running a kind of old Firefox though (18.0) and I've been told on other issues that more up-to-date FF versions do not have certain problems. However, I'm on the "LTS" (long-term support) version of Ubuntu, running the version of Firefox that they're still supplying, so I doubt I'm alone at running this version of Firefox. Whether Drupal supports it is another question.

internetdevels’s picture

StatusFileSize
new264.72 KB
new1.01 KB
new488 bytes

Here is one more patch. Now it looks like this:
after

jhodgdon’s picture

StatusFileSize
new42.13 KB

This patch does not work on Firefox 18 / Ubuntu. The text still runs over the edges of the boxes.
screen shot of text running out of the boxes

barraponto’s picture

@jhodgdon Ubuntu 12.04 (latest LTS release) supports latest Firefox (see http://packages.ubuntu.com/precise/firefox) and even Ubuntu 10.04 (still supported LTS release) has Firefox 20 available (see http://packages.ubuntu.com/lucid/firefox).

alansaviolobo’s picture

I dont think this is applicable anymore. can we close this?

nod_’s picture

Nope, still an issue.

alansaviolobo’s picture

StatusFileSize
new1.01 KB
subins2000’s picture

StatusFileSize
new706 bytes

Just needed to remove the height limit of ".system-modules td details", change "white-space" property and add "word-wrap" property.
Screenshot of the display of description correctly

subins2000’s picture

Issue summary: View changes
StatusFileSize
new43.34 KB

Here is the screenshot of the correct display of description as a result of the patch #12

lauriii’s picture

Thanks for working on this! Good work on the patch. It fixes the issue we are fixing here. I tested the patch and saw it generates some additional spacing on Firefox for the bottom of the element. Screenshots:

Before:

After:

lauriii’s picture

Status: Needs review » Needs work
Issue tags: +Needs issue summary update

We could describe more briefly on the issue summary what we are doing here. We need to add also beta evaluation table.

subins2000’s picture

Issue summary: View changes
subins2000’s picture

Issue summary: View changes
subins2000’s picture

StatusFileSize
new725 bytes
new62.39 KB

The problem mentioned in #14 is fixed as of this patch. Here is the displaying in Firefox :

subins2000’s picture

Issue summary: View changes
subins2000’s picture

StatusFileSize
new205 bytes
new725 bytes

Here is the interdiff and the patch.

The problem mentioned in #14 is fixed as of this patch. Here is the displaying in Firefox :

lauriii’s picture

Status: Needs work » Needs review

Lets put this to needs review as it needs review and it activates the test bot

nod_’s picture

Issue tags: +Usability

For reference, this is what it was supposed to look like and used to look like: (from #1790280: Module page redesign 2.0)

module page redisign

Notice the text is always taking one line and text is cut off by text-overflow: ellipsis;. The way this issue is going is not in the spirit of the redesign work, we need to involve UX people so they can sign off on this or not.

lewisnyman’s picture

Issue tags: +frontend, +CSS
jhodgdon’s picture

Status: Needs review » Needs work

OK, so what you're saying in #22 is that if the box is collapsed, the text is supposed to be limited to one line with text-overflow: ellipsis;, and then when the box is expanded, presumably the whole text should be shown?

In that case, if that was the design agreed to previously by the UX team, we should make the patch do that.

nod_’s picture

Right, it was a matter of having a consistent height for rows on this table.

idebr’s picture

Issue summary: View changes
Status: Needs work » Needs review
StatusFileSize
new47.33 KB
new988 bytes

The text-overflow: ellipsis only works on a container with a fixed width. The fixed width was lost in #2289247: Visually hide the table headers on the modules page. Attached patch is the minimum of changes required to reintroduce it. A more elegant fix would require the table header to be removed from the markup completely, but this would contradict the intention of the linked issue.

I'm a little confused on the scope of the issue though:

  1. The issue title refers to the border focus effect added in #2368393: Fix focus effect on summary details ? This behavior is specific for Seven and I think this is better fixed in a followup?
  2. The screenshot in the issue summary refers to overflowing table cells, which is fixed by the attached patch
  3. The beta evaluation mentions this is a 'Major' issue while the issue metadata priority is set to 'Normal'?

Screenshot after:

mgifford’s picture

StatusFileSize
new988 bytes

Re-uploading last patch for the bots.

Version: 8.0.x-dev » 8.1.x-dev

Drupal 8.0.6 was released on April 6 and is the final bugfix release for the Drupal 8.0.x series. Drupal 8.0.x will not receive any further development aside from security fixes. Drupal 8.1.0-rc1 is now available and sites should prepare to update to 8.1.0.

Bug reports should be targeted against the 8.1.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.9 was released on September 7 and is the final bugfix release for the Drupal 8.1.x series. Drupal 8.1.x will not receive any further development aside from security fixes. Drupal 8.2.0-rc1 is now available and sites should prepare to upgrade to 8.2.0.

Bug reports should be targeted against the 8.2.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.6 was released on February 1, 2017 and is the final full bugfix release for the Drupal 8.2.x series. Drupal 8.2.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.3.0 on April 5, 2017. (Drupal 8.3.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.3.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.6 was released on August 2, 2017 and is the final full bugfix release for the Drupal 8.3.x series. Drupal 8.3.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.4.0 on October 4, 2017. (Drupal 8.4.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.4.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.4 was released on January 3, 2018 and is the final full bugfix release for the Drupal 8.4.x series. Drupal 8.4.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.5.0 on March 7, 2018. (Drupal 8.5.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.5.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.6 was released on August 1, 2018 and is the final bugfix release for the Drupal 8.5.x series. Drupal 8.5.x will not receive any further development aside from security fixes. Sites should prepare to update to 8.6.0 on September 5, 2018. (Drupal 8.6.0-rc1 is available for testing.)

Bug reports should be targeted against the 8.6.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.6.x-dev » 8.8.x-dev

Drupal 8.6.x will not receive any further development aside from security fixes. Bug reports should be targeted against the 8.8.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.9.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.7 was released on June 3, 2020 and is the final full bugfix release for the Drupal 8.8.x series. Drupal 8.8.x will not receive any further development aside from security fixes. Sites should prepare to update to Drupal 8.9.0 or Drupal 9.0.0 for ongoing support.

Bug reports should be targeted against the 8.9.x-dev branch from now on, and new development or disruptive changes should be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

pameeela’s picture

Status: Needs review » Closed (works as designed)
Issue tags: -frontend, -CSS +Bug Smash Initiative
StatusFileSize
new85.78 KB

This appears to be all sorted now for longer descriptions: