チェックボックス/文字が多い問題の根本解決

by itizawaさん

  1. markdown のように、チェックボックスの右側にラベルがくるようにする
  2. ラベルを短く表示して説明はツールチップで表示する

認証機構設定以下のラベルも同じ現象

新規ログイン時、email が一致したローカルアカウントが存在した場合は自動的に紐付ける

文面はどう省略するかは要相談

きっかけ

セキュリテイ設定画面のレスポンシブ対応する時に、左のラベルの文字が長すぎてテキスト(text-right)が変な表示になってしまった。

Screen Shot 0002-04-24 at 16.15.29.png

  • 現在はtext-nowrapとmarginで無理やり修正済み Screen Shot 0002-04-24 at 16.12.46.png

問題点

  • 「ページのリスト表示と検索」が右に寄っているのが気になる
  • 文字が多すぎて読みづらい
  • 左と右で書かれていることが被っている

参考/他ページのチェックボックス

Screen Shot 0002-04-24 at 16.37.18.png

Screen Shot 0002-04-24 at 16.05.07.png
⇨更新ボタンと離れすぎている?

Screen Shot 0002-04-24 at 16.19.09.png

Screen Shot 0002-04-24 at 16.20.42.png

提案

市澤さんから、通知設定を参考にすれば良いのでは?というアドバイスがあった 例↓↓
1. [小見出し]
アクセス権の無いユーザーへの表示・非表示

  • 自分のみに閲覧制限をしているページをアクセス権のないユーザーにも表示する
  • 特定グループにのみに閲覧制限をしているページをアクセス権のないユーザーにも表示する
  1. 左のラベルをなくす
  2. 自分のみ特定のグループのみを太字にしてチェックボックス同士の違いを強調。

2.もしくはマークダウン設定のようにラベルを左ではなく、チェックボックスの右側におく。 そして中央寄せ?(ここはフォームとのバランス次第で決める)
こちらでもいいと思う。

  • ラベル
    (説明文)
  • ラベル
    (説明文)