Defect #33723

File name is displayed over the clip icon in new/edit forms

Added by Go MAEDA over 1 year ago. Updated about 1 year ago.

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

0%

Category:UI
Target version:-
Resolution:Fixed Affected version:

Description

See the screenshot below. Probably all forms that accept attachments are affected.

filename-over-clip-icon.png (19.8 KB) Go MAEDA, 2020-07-13 06:52

before.png (19.3 KB) Yuichi HARADA, 2020-07-29 09:52

after.png (19.5 KB) Yuichi HARADA, 2020-07-29 09:54


Related issues

Related to Redmine - Defect #33563: File selection buttons are not fully displayed with Googl... Closed

History

#1 Updated by Go MAEDA over 1 year ago

  • Affected version set to 4.1.1

4.1-stable and the trunk are affected. 4.0-stable is not affected.

#2 Updated by Yuichi HARADA about 1 year ago

The following patch will solve this issue.

diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index 282a4adf6..57ee43d88 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -903,7 +903,7 @@ span.required {color: #bb0000;}

 .attachments_fields input.description, #existing-attachments input.description {margin-left:4px; width:340px;}
 .attachments_fields>span, #existing-attachments>span {display:block; white-space:nowrap;}
-.attachments_fields input.filename, #existing-attachments .filename {border:0; width:250px; color:#555; background-color:inherit; }
+.attachments_fields input.filename, #existing-attachments .filename {border:0; width:250px; color:#555; background-color:inherit; padding-left:16px;}
 .tabular input.filename {max-width:75% !important;}
 .attachments_fields input.filename {height:1.8em;}
 .attachments_fields .ajax-waiting input.filename {background:url(../images/hourglass.png) no-repeat 0px 50%;}
Before patch apply After patch apply

#3 Updated by Bernhard Rohloff about 1 year ago

I cannot reproduce this issue in my production environment with v4.1.1-stable When I open the form to create a new issue, the uploaded items have the .icon class set properly and don't overlap with the text. Nonetheless adding the .icon class would be my preferred solution for this problem.

<input type="text" class="icon icon-attachment filename readonly" name="attachments[1][filename]" readonly="readonly">

#4 Updated by Go MAEDA about 1 year ago

  • Affected version deleted (4.1.1)

Bernhard Rohloff wrote:

I cannot reproduce this issue in my production environment with v4.1.1-stable When I open the form to create a new issue,

Sorry, 4.1.1 is not affected. The issue was caused by r19815 (#33563). So, the trunk and the latest 4.1-stable branch are affected.

#5 Updated by Go MAEDA about 1 year ago

Bernhard Rohloff wrote:

Nonetheless adding the .icon class would be my preferred solution for this problem.

Actually, it already has '.icon' class.

#6 Updated by Go MAEDA about 1 year ago

  • Target version set to Candidate for next major release

#7 Updated by Go MAEDA about 1 year ago

  • Related to Defect #33563: File selection buttons are not fully displayed with Google Chrome in some language added

#8 Updated by Go MAEDA about 1 year ago

The cause of this issue is that 20px of padding-left set by source:trunk/public/stylesheets/application.css@20017#L1475 is reset to 7px by source:trunk/public/stylesheets/application.css@20017#L468.

The following patch fixes the problem described above.

diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index 891faf69a..a32030039 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -465,7 +465,7 @@ div.square {
 .splitcontenttop {flex: 2; flex-basis: 100%;}

 form {display: inline;}
-input:not([type="file"]), select, button {vertical-align: middle; margin-top: 1px; margin-bottom: 1px; height: 24px; padding: 0 7px;}
+input, select, button {vertical-align: middle; margin-top: 1px; margin-bottom: 1px; height: 24px; padding: 0 7px;}
 input, select, textarea, button { color: #333; background-color: #fff; border:1px solid #ccc; border-radius:3px; box-sizing: border-box;}
 select {
   -webkit-appearance: none;
@@ -479,7 +479,7 @@ select {
   background-position: calc(100% - 7px) 50%;
   padding-right: 20px;
 }
-input[type="file"] {border: 0; padding-left: 0; padding-right: 0; background-color: initial; }
+input[type="file"] {border: 0; padding-left: 0; padding-right: 0; height: initial; background-color: initial; }
 input[type="submit"], button[type="submit"] {
   -webkit-appearance: button;
   cursor: pointer;

#9 Updated by Go MAEDA about 1 year ago

  • Status changed from New to Closed
  • Target version deleted (Candidate for next major release)
  • Resolution set to Fixed

The issue was caused by r19815 (#33563) and now fixed by reverting the commit in r20029.

Also available in: Atom PDF