Defect #32981

Unable to distinguish disabled input fields

Added by Hirokazu Onozato 9 months ago. Updated 8 months ago.

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

0%

Category:UI
Target version:4.1.1
Resolution:Fixed Affected version:4.1.0

Description

Although it is a text box with disabled set, it is difficult to identify because the background color does not change.
(The cursor changes when you mouse over, so we can identify it.)

Below is the [Settings] > [Incoming emails] tab.
Disabled is set for [Incoming email WS API key], but it is difficult to identify that input is not possible because the background color does not change.

This is because the following style is set in application.css.

input, select, textarea, button { color: #333; background-color: #fff; border:1px solid #ccc; border-radius:3px; box-sizing: border-box;}

The background-color is #fff, but the background-color for disabled is not specified.

Suggested fix

There are two ways to fix this.

1. Add a style for disabled

The setting of "input:disabled, select:disabled, textarea:disabled" already exists, so add the background-color there.

input:disabled, select:disabled, textarea:disabled {
  cursor: not-allowed;
  color: graytext;
+  background-color: #ebebe4;
}

However, since there are various types of input, it is not clear whether there is no problem in specifying it uniformly like this.
It may be safer to specify only the required type, such as input[type="text"].

input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="date"]:disabled,
input[type="number"]:disabled,
select:disabled,
textarea:disabled {
  background-color: #ebebe4;
}

2. Remove "background-color: #fff"

I think the need to reset the background-color is low.

- input, select, textarea, button { color: #333; background-color: #fff; border:1px solid #ccc; border-radius:3px; box-sizing: border-box;}
+ input, select, textarea, button { color: #333; border:1px solid #ccc; border-radius:3px; box-sizing: border-box;}

By not resetting, disabled will also be displayed in the default style.

disabled.png (3.21 KB) Hirokazu Onozato, 2020-02-11 00:52

disabled-2.png (3.19 KB) Hirokazu Onozato, 2020-02-11 01:02

chrome-css.png (12.1 KB) Hirokazu Onozato, 2020-02-13 16:27


Related issues

Related to Redmine - Patch #31147: Add custom styles for all fields Closed

Associated revisions

Revision 19519
Added by Go MAEDA 8 months ago

Unable to distinguish disabled input fields (#32981).

Patch by Hirokazu Onozato.

Revision 19525
Added by Go MAEDA 8 months ago

Merged r19519 from trunk to 4.1-stable (#32981).

History

#1 Updated by Bernhard Rohloff 9 months ago

  • Related to Patch #31147: Add custom styles for all fields added

#2 Updated by Bernhard Rohloff 9 months ago

  • Status changed from New to Confirmed

We styled the input fields background in #31147 to get a consistent look of Redmine and fix problems with dark themed desktops.
I think your first solution is the most appropriate one.

#3 Updated by Go MAEDA 8 months ago

Onozato-san, thank you for reporting this issue.

Just out of curiosity, how did you pick the color #ebebe4?

#4 Updated by Hirokazu Onozato 8 months ago

Go MAEDA wrote:

Just out of curiosity, how did you pick the color #ebebe4?

Using Chrome's DevTools, I checked with Chrome default CSS.
On my Windows PC, it was rgb(235, 235, 228) = #ebebe4.

#5 Updated by Go MAEDA 8 months ago

  • Target version set to 4.1.1

The first patch provided by Hirokazu Onozato looks good. Setting the target version to 4.1.1.

diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index e04091a10..815bd4e15 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -423,6 +423,7 @@ span.add_attachment a {padding-left:16px; background: url(../images/bullet_add.p
 input:disabled, select:disabled, textarea:disabled {
   cursor: not-allowed;
   color: graytext;
+  background-color: #ebebe4;
 }

#6 Updated by Go MAEDA 8 months ago

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

Committed the patch. Thank you for reporting and fixing the issue.

#7 Updated by Go MAEDA 8 months ago

  • Subject changed from Difficult to identify a text box that is disabled to Unable to distinguish disabled input fields

#8 Updated by Go MAEDA 8 months ago

  • Status changed from Resolved to Closed

Also available in: Atom PDF