Project

General

Profile

Actions
Copy link

Defect #27862

closed

Preformatted text overflows in preview

Added by Kenan Dervisevic over 6 years ago. Updated about 6 years ago.

Status:
Closed
Priority:
Normal
Assignee:
Go MAEDA
Category:
Issues
Target version:
3.3.7
Start date:
Due date:
% Done:

0%

Estimated time:
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.

Files

Download all files
issue_notes overflow.png (101 KB) issue_notes overflow.png Long note overflow with pre Kenan Dervisevic, 2017-12-28 14:39
27862-patch.diff (590 Bytes) 27862-patch.diff patch made from Mizuki Ishikawa's post Go MAEDA, 2018-01-18 04:48
Actions
Copy link
 #1

Updated by Kenan Dervisevic over 6 years ago

I should note this happens in the preview panel

Actions
Copy link
 #2

Updated by Mizuki ISHIKAWA over 6 years 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; }
Actions
Copy link
 #3

Updated by Go MAEDA over 6 years 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; }
Actions
Copy link
 #4

Updated by Mizuki ISHIKAWA over 6 years 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".

Actions
Copy link
 #5

Updated by Go MAEDA over 6 years 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; }
Actions
Copy link
 #6

Updated by Mizuki ISHIKAWA over 6 years 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.

Actions
Copy link
 #7

Updated by Go MAEDA over 6 years ago

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

Actions
Copy link
 #8

Updated by Go MAEDA about 6 years 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.

Actions
Copy link
 #9

Updated by Go MAEDA about 6 years ago

  • Status changed from Resolved to Closed

Merged to stable branches.

Actions
Copy link

Also available in: Atom PDF