プロジェクト

全般

プロフィール

QA #1002

未完了

チケット一覧画面で表示項目の幅を調整したい(記入中)

奈良 裕記 さんが4年以上前に追加. ほぼ3年前に更新.

ステータス:
新規
優先度:
通常
担当者:
-
カテゴリ:
UI
対象バージョン:
開始日:
2019/08/17
期日:
進捗率:

0%

予定工数:

説明

■現象/要望

チケット一覧画面で、表示項目の幅は項目名の幅に左右されてしまう。
例えば、3桁の数字しか表示されない項目でも、項目名が長いと無駄な横幅を占有し、結果的に右側の項目が表示されなくなる。
チケット一覧画面単位で、項目の表示幅を調整可能にしたい。
項目名部分が1行に収まらず複数行になっても構わない。

■解決策(記入中)

view customizeにて、対象のチケット一覧画面に項目幅のCSS設定を行う事で対応可能

対応前後画面サンプルを示す。
後者では、各項目の表示幅を制限することで、右端の対象バージョン欄まで表示させている。

viewcustomize 設定項目

パスのパターン

挿入位置 全てのページのヘッダ
種別 CSS

パスのパターンは、適用範囲により異なる。

特定プロジェクトのすべてのチケット一覧/カスタムクエリに反映したい場合
/projects/PJ識別子/issues.*

特定プロジェクトの特定のカスタムクエリのみに反映したい場合(以下はquery_id=33の場合)
/projects/PJ識別子/issues?query_id=33.*

当該Redmine内の全PJに適用する場合
/issues.*

折り返し設定

項目名称、長文の折り返し設定
CSSで下記設定すればよい。英文折り返し位置など個別検討必要な部分もある。
下記には不要な物も混ざっている模様。(未検証)
word-break: break-all;
word-wrap: break-word;
white-space: pre-wrap;
overflow-wrap : break-word;

表示項目幅変更

CSSで下記の様に設定すればよい。
min-width: 40px;
width: 8%;

CSSクラス指定

ヘッダ行指定(全列の初期値設定)
.table-list-header

各項目のヘッダ部分指定
th.

各項目のデータ部分指定
td.

カスタムフィールドの場合、 カスタムフィールド番号を含めて指定する。
例 td.cf_11.int

実際にはWebブラウザのデバッグ画面を参照して指定すること。

■対応状況

■補足


ファイル

issuelist-width-compare.png (140 KB) issuelist-width-compare.png 奈良 裕記, 2019/08/17 02:34
csssample.txt (2.2 KB) csssample.txt viewcustomize用CSS設定サンプル 奈良 裕記, 2019/10/30 23:26

奈良 裕記 さんが4年以上前に更新

奈良 裕記 さんが4年以上前に更新

奈良 裕記 さんが4年以上前に更新

  • 題名チケット一覧画面で表示項目の幅を調整したい から チケット一覧画面で表示項目の幅を調整したい(記入中) に変更

奈良 裕記 さんが4年以上前に更新

奈良 裕記 さんが4年以上前に更新

奈良 裕記 さんが4年以上前に更新

竹内 亮二 さんが4年以上前に更新

すみません。添付画面のように表示変更した際のCSSをサンプルとして公開していただくことは可能でしょうか?
まだ、CSS初心者の為、記載内容を基にCSSをView customizeに組み込もうと思ったのですが、どこか間違えていて、うまく行っておりません。
お手数ですが、可能であればお願いいたします。

奈良 裕記 さんが4年以上前に更新

チケット一覧の各表示幅を調整したいのは判ります。

別件でこの辺の内容を編集中なので、しばらくお待ちください。

来週中旬には公開します。

奈良 裕記 さんが4年以上前に更新

  • ファイル csssample.txt を追加

viewcustomize用のCSS設定サンプルを添付します。

奈良 裕記 さんが4年以上前に更新

  • ファイル を削除 (csssample.txt)

奈良 裕記 さんが4年以上前に更新

奈良 裕記 さんがほぼ3年前に更新

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