Defect #35545

Fix css class assignment in issue custom field rendering in show view

Added by Liane Hampe about 1 year ago. Updated about 1 year ago.

Status:NewStart date:
Priority:NormalDue date:
Assignee:-% Done:


Target version:-
Resolution: Affected version:4.2.1


Rendering the issue custom fields in the show view is done by the
class IssueFieldsRow, which can be found in issues_helper.rb.

The method IssueFieldRow#to_html has an error because the
class 'splitcontentright' will never be assigned.

This patch fixes this error by modifying the class in the respective
content_tag of the helper method. Thus, it is a one liner.

fix_issue_custom_field_rendering.patch Magnifier - Patches css class assignment (559 Bytes) Liane Hampe, 2021-07-08 17:23

35545-layout-issue.png (164 KB) Go MAEDA, 2021-07-13 23:56

35545-layout-issue-flex-css.png (73.4 KB) Liane Hampe, 2021-07-14 09:35

fix_issue_custom_field_css.patch Magnifier (722 Bytes) Liane Hampe, 2021-07-14 10:30


#1 Updated by Liane Hampe about 1 year ago

This is the content of the patch file:

diff --git a/app/helpers/issues_helper.rb b/app/helpers/issues_helper.rb
index 756d7ed4c..d43a7db8b 100755
--- a/app/helpers/issues_helper.rb
+++ b/app/helpers/issues_helper.rb
@@ -332,7 +332,7 @@ module IssuesHelper
     def to_html
       content =
         content_tag('div', @left.reduce(&:+), :class => 'splitcontentleft') +
-        content_tag('div', @right.reduce(&:+), :class => 'splitcontentleft')
+        content_tag('div', @right.reduce(&:+), :class => 'splitcontentright')

       content_tag('div', content, :class => 'splitcontent')

#2 Updated by Go MAEDA about 1 year ago

The suggested change causes a layout issue. See the screenshot below.

#3 Updated by Liane Hampe about 1 year ago


Thank you for this important information.

I have fixed it with some more css:

Old styles:
.splitcontent {overflow: auto; display: flex; flex-wrap: wrap}
.splitcontentleft {flex: 1; margin-right: 5px;}
.splitcontentright {flex: 1; margin-left: 5px;}

New styles:
.splitcontent {overflow: auto; display: flex; flex-wrap: wrap;justify-content: space-between}
.splitcontentleft, .splitcontentright {width: 49.5%}

This is how it looks like now:

It also looks nice on the project overview page where the same css classes are used.

Best Regards

#4 Updated by Liane Hampe about 1 year ago

Here is the patch file for the css changes.

Also available in: Atom PDF