記事投稿画面のチェック、ラジオボタンの押し間違え防止

[shobu]

いつもお世話になっております。

表題の通り、記事投稿画面のチェック、ラジオボタンのcss設定が気になっています。
デフォルトですと各ボタンをくるんでいるlabelがblock要素指定になっていますので、labelの幅は左右一杯まで広がっていて、直感的には何も無いように見える右側までもがクリックできる状態です。

投稿画面の操作中に、スクロールその他の操作で、何もないと思っている部分を思わずクリックしてしまうことは良くあると思いますが、運が悪いと上記の見えないラベル部分を触ってしまうケースもあるようで、私の見ている環境ですと、いつの間にか既存記事の設定が変ってた…ということが頻繁に発生しました。

http://modx.jp/docs/tips/manager_custom.html
こちらの記事に管理画面CSS設定をプラグインで変更する方法が紹介されていて、私の所では

<style type="text/css">
form#mutate div.tmplvars label {width:auto;margin-right:auto;float:left;clear:left;}
</style>

として、選択エリアがラベル文字の範囲に収まるように変更しています。

それぞれのお考えもあるとは思うのですが、現状のようにラベル文字の右側まで画面横一杯に選択エリアが広がっている状況よりも、上記の様な状態の方が操作ミスが起きづらいと思うのですが、いかがでしょうか。
デフォルトでこのような状態（もっと良いスタイル表記があるかもしれませんが）でどうでしょか？という提案でした。

引き続きよろしくお願いいたします。

[shobu]

スミマセン、これ、はやとちりというか、新しい管理画面テンプレートRevoStyleだと width:auto だけの指定になってて前述の問題が解消されているんですね。
新バージョンには旧スタイルはついていないようですし、旧環境からアップデートしてる環境でユーザの混乱を防ぎたいと言うことで旧スタイルを使用している環境では先の対応しかなさそうですね。
お騒がせしました。。。

[yama]

http://forum.modx.jp/viewtopic.php?p=5528#p5528
旧スタイルというのはMODxCarbonのことですよね？上記の新しいものに差し替えると解決するでしょうか？

[shobu]

yamaさん、いつもありがとうございます。

新バージョンも配布されていたのですね。
アップデートされた環境なので古いものが残っていたわけですが、CSS中の先のメッセージの部分の display:block; さえなければ良いのかもしれませんが…。
※今回はスタイルのCSSをいじらない方針でplugin対応にしておきました。複数ユーザがいるサイトなんかだと、チョット操作変ると問い合せ来たり何だりで大変なので。

教えて頂いたスタイル、古いスタイルが動いているような環境だと現在進行形で運用中のサイトが殆どのため簡単に差し替えして試せる環境が無いので、圧縮ファイルの中のcssを覗いてみたところ

form#mutate div.tmplvars label {display:block;}

という一文があるので現象変らず何じゃないでしょうかね。。。

[yama]

http://forum.modx.jp/viewtopic.php?p=5528#p5528
調整しました。いかがでしょう？

[shobu]

ご対応ありがとうございました。

form#mutate div.tmplvars label を取っ払ったと言うことですね。

私以外のユーザが存在する稼働環境でスタイル全入れ替えはチョット怖いので、chromeで上記CSSの display:block; を停止させてエミュレートしてみたところ、Revoスタイルの横並びになるようなので、とりあえずの問題は回避出来ると思います。
「私の環境」ですとボタンと文字列の縦方向の揃えが微妙にズレて、神経質な私の性格だと気になるため、以下のようにしてみたら一応綺麗にそろうようになりました。

form#mutate div.tmplvars label {
vertical-align: top;
}

でも、環境や表示に使用しているフォントなどの影響もあると思いますので、とりえあずは display:block; を殺すところまでで良いのではないかと思います。

たぶん、他に助かる人もいるでしょう。。。ありがとうございました。