プロジェクト

全般

プロフィール

Vote #80683

完了

Unable to distinguish disabled input fields

Admin Redmine さんが3年以上前に追加. 3年以上前に更新.

ステータス:
Closed
優先度:
通常
担当者:
-
カテゴリ:
UI_10
対象バージョン:
開始日:
2022/05/09
期日:
進捗率:

0%

予定工数:
category_id:
10
version_id:
160
issue_org_id:
32981
author_id:
95681
assigned_to_id:
332
comments:
8
status_id:
5
tracker_id:
1
plus1:
0
affected_version:
closed_on:
affected_version_id:
127
ステータス-->[Closed]

説明

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.

!disabled.png!

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.

h2. Suggested fix

There are two ways to fix this.

h3. 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;
}

h3. 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-2.png!


journals

--------------------------------------------------------------------------------
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.
--------------------------------------------------------------------------------
Onozato-san, thank you for reporting this issue.

Just out of curiosity, how did you pick the color #ebebe4?
--------------------------------------------------------------------------------
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.

!chrome-css.png!

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

<pre><code class="diff">
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;
}


</code></pre>
--------------------------------------------------------------------------------
Committed the patch. Thank you for reporting and fixing the issue.
--------------------------------------------------------------------------------

--------------------------------------------------------------------------------

--------------------------------------------------------------------------------


related_issues

relates,Closed,31147,Add custom styles for all fields

Admin Redmine さんが3年以上前に更新

  • カテゴリUI_10 にセット
  • 対象バージョン4.1.1_160 にセット

他の形式にエクスポート: Atom PDF

いいね!0
いいね!0