Defect #19578

Issues reports table header overlaping

Added by Antoine Duranel about 3 years ago. Updated 4 months ago.

Status:ClosedStart date:
Priority:NormalDue date:
Assignee:Go MAEDA% Done:

0%

Category:UI
Target version:3.3.6
Resolution:Fixed Affected version:2.4.0

Description

Hi,

After migrating from Redmine 1.2.1 to 3.0.1, the Issues > Summary > Reports details page does not have the same behaviour for the table header overflow.

We use around 20 "Issues statuses" in our Redmine instance and with this latest Redmine version, headers overlap to fit in the window size which make them unreable (see attached screenshots).
This change might have been done before the Redmine 3.0.1 release but I did not find the entry about it in Changelogs.

Thanks,
Antoine

redmine_1.2.1.png (15 KB) Antoine Duranel, 2015-04-09 12:47

redmine_3.0.1.png (16.1 KB) Antoine Duranel, 2015-04-09 12:47

table-layout-auto-report-detail@2x.png (19.9 KB) Go MAEDA, 2017-11-28 04:15

table-layout-auto-summary@2x.png (62.8 KB) Go MAEDA, 2017-11-28 04:25

white-space-normal-report-detail@2x.png (20.2 KB) Go MAEDA, 2017-11-28 04:32

table-layout-fixed@2x.png (19.5 KB) Go MAEDA, 2017-11-28 04:33

19578.diff Magnifier - patch (494 Bytes) Go MAEDA, 2017-12-09 05:55


Related issues

Related to Redmine - Defect #15307: HTML 5 deprecates width and align attributes Closed
Related to Redmine - Patch #27772: Issues reports should show only statuses used by the project Closed

Associated revisions

Revision 17108
Added by Go MAEDA 4 months ago

Fix: Overlapping text in table header on issues reports page (#19578).

Patch by Go MAEDA.

Revision 17109
Added by Go MAEDA 4 months ago

Merged r17108 to 3.4-stable (#19578).

Revision 17110
Added by Go MAEDA 4 months ago

Merged r17108 to 3.3-stable (#19578).

History

#1 Updated by Leonel Iturralde about 3 years ago

I confirmed this behavior. It is caused by

table.issue-report {table-layout:fixed;}

source:trunk/public/stylesheets/application.css@14155#L173
If I change it to table-layout:auto . I can see all the content.
You can fixed this by creating a custom theme to change this style. Just while waiting for a patch.

#2 Updated by Antoine Duranel about 3 years ago

Thanks, it works fine.

#3 Updated by Toshi MARUYAMA almost 3 years ago

  • Category set to UI

#4 Updated by Go MAEDA 5 months ago

  • Related to Defect #15307: HTML 5 deprecates width and align attributes added

#5 Updated by Go MAEDA 5 months ago

Leonel Iturralde wrote:

If I change it to table-layout:auto . I can see all the content.

Thank you for the workaround.

But changing table-layout property from fixed to auto causes other problem. Please see the screenshots blow. The right end of the table is not displayed (actually there are columns "status nine", "Open", "Closed", "Total"). And columns are not aligned in issues summary page.

Before fix:

After:

I think adding white-space: nowrap to th elements is better solution.

Index: public/stylesheets/application.css
===================================================================
--- public/stylesheets/application.css    (revision 17048)
+++ public/stylesheets/application.css    (working copy)
@@ -274,6 +274,7 @@
 tr.issue.idnt-9 td.subject {padding-left: 152px; background-position: 136px 50%;}

 table.issue-report {table-layout:fixed;}
+table.issue-report th {white-space: normal;}

 tr.entry { border: 1px solid #f8f8f8; }
 tr.entry td { white-space: nowrap; }

#6 Updated by Go MAEDA 5 months ago

  • File 19578.diffMagnifier added
  • Target version set to 3.3.6

Setting target version to 3.3.6.

Before:

After:

#7 Updated by Marius BALTEANU 4 months ago

  • Related to Patch #27772: Issues reports should show only statuses used by the project added

#8 Updated by Go MAEDA 4 months ago

  • Status changed from New to Resolved
  • Assignee set to Go MAEDA
  • Resolution set to Fixed

Committed to the trunk.

#9 Updated by Go MAEDA 4 months ago

  • Status changed from Resolved to Closed

Merged to 3.4-stable and 3.3-stable.

Also available in: Atom PDF