Defect #27862

Preformatted text overflows in preview

Added by Kenan Dervisevic 23 days ago. Updated 1 day ago.

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

0%

Category:Issues
Target version:3.3.7
Resolution:Fixed Affected version:3.3.6

Description

If user uses pre in his note and the note has some long text, it overflows over the sidebar on the right.

issue_notes overflow.png - Long note overflow with pre (101 KB) Kenan Dervisevic, 2017-12-28 14:39

27862-patch.diff Magnifier - patch made from Mizuki Ishikawa's post (590 Bytes) Go MAEDA, 2018-01-18 04:48

Associated revisions

Revision 17181
Added by Go MAEDA 1 day ago

Fix: Preformatted text overflows in preview (#27862).

Patch by Mizuki ISHIKAWA.

Revision 17182
Added by Go MAEDA 1 day ago

Merged r17181 from trunk to 3.4-stable (#27862).

Revision 17183
Added by Go MAEDA 1 day ago

Merged r17181 from trunk to 3.3-stable (#27862).

History

#1 Updated by Kenan Dervisevic 23 days ago

I should note this happens in the preview panel

#2 Updated by Mizuki ISHIKAWA 4 days ago

It is not preferable that the display at preview is different from the actual display.
I think adding this code will solve this problem.

diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index e194ccd78..385869fab 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -718,6 +718,7 @@ input#time_entry_comments { width: 90%;}
 input#months { width: 30px; }

 #preview fieldset {margin-top: 1em; background: url(../images/draft.png)}
+fieldset.preview { min-width: inherit; }

 .tabular.settings p{ padding-left: 300px; }
 .tabular.settings label{ margin-left: -300px; width: 295px; }

#3 Updated by Go MAEDA 4 days ago

  • Status changed from New to Confirmed

I confirmed the problem and the patch submitted in #27862#note-2 works fine for me. But I think we can use the existing selector "#preview fieldset" instead of adding "fieldset.preview", don't we?

Index: public/stylesheets/application.css
===================================================================
--- public/stylesheets/application.css    (revision 17180)
+++ public/stylesheets/application.css    (working copy)
@@ -717,7 +717,7 @@
 input#time_entry_comments { width: 90%;}
 input#months { width: 30px; }

-#preview fieldset {margin-top: 1em; background: url(../images/draft.png)}
+#preview fieldset {margin-top: 1em; min-width: inherit; background: url(../images/draft.png)}

 .tabular.settings p{ padding-left: 300px; }
 .tabular.settings label{ margin-left: -300px; width: 295px; }

#4 Updated by Mizuki ISHIKAWA 4 days ago

When using the selector "#preview fieldset", the style was not applied to the preview screen for editing existing notes.

Therefore, I prepared a new selector "fieldset.preview".

#5 Updated by Go MAEDA 4 days ago

Mizuki ISHIKAWA wrote:

When using the selector "#preview fieldset", the style was not applied to the preview screen for editing existing notes.

Thank you for the explanation, I confirmed what you wrote. I noticed that the preview area when editing an existing note doesn't have "DRAFT" background image. Your patch also fixes that.

Maybe you can put the two lines of CSS together as follows. Mizuki, could you review this?

Index: public/stylesheets/application.css
===================================================================
--- public/stylesheets/application.css    (revision 17180)
+++ public/stylesheets/application.css    (working copy)
@@ -717,7 +717,7 @@
 input#time_entry_comments { width: 90%;}
 input#months { width: 30px; }

-#preview fieldset {margin-top: 1em; background: url(../images/draft.png)}
+fieldset.preview {margin-top: 1em; min-width: inherit; background: url(../images/draft.png)}

 .tabular.settings p{ padding-left: 300px; }
 .tabular.settings label{ margin-left: -300px; width: 295px; }

#6 Updated by Mizuki ISHIKAWA 3 days ago

Go MAEDA wrote:

I noticed that the preview area when editing an existing note doesn't have "DRAFT" background image. Your patch also fixes that.

Maybe you can put the two lines of CSS together as follows. Mizuki, could you review this?

Thank you for fixing the code I wrote.
I confirmed that the code works as expected. This makes it possible to equalize the layout of the preview panel.

#7 Updated by Go MAEDA 3 days ago

  • File 27862-patch.diffMagnifier added
  • Target version set to 3.3.7
  • Affected version changed from 3.4.3 to 3.3.6

I confirmed that the patch also works as expected for news and wiki.
Setting target version to 3.3.7.

#8 Updated by Go MAEDA 1 day ago

  • Subject changed from Issue notes overflow when using pre to Preformatted text overflows in preview
  • Status changed from Confirmed to Resolved
  • Assignee set to Go MAEDA
  • Resolution set to Fixed

Committed. Thank you all for reporting and fixing this issue.

#9 Updated by Go MAEDA 1 day ago

  • Status changed from Resolved to Closed

Merged to stable branches.

Also available in: Atom PDF