ランプの中身(Ruby on Railsのシステム開発)
ランプの中身(Ruby on Railsのシステム開発)では、株式会社ケイビーエムジェイのRuby on Railsエンジニアが蓄積したノウハウを公開しています。Ruby on Railに関する技術解説や実践的なノウハウなど、開発現場の技術に則したコンテンツを随時追加していきます。 初心者の方でもわかりやすい技術解説を心がけています。リクエスト、ご質問も受け付けいますので、ご気軽にコメントを記述して下さい。

< mongrelとの戦い〜503エラー？m... | メイン | clearfixでfloat解除 >

maiの中身（ruby
2008.03.28

エラー表示で意図しない改行を解消する−fieldWithErrors、ActionView::Base、field_error_proc

こんにちは。maiです。
Ruby on Railsにはいろいろと便利機能がありますが、
フォームでvalidationに引っかかると該当箇所が赤く強調されるというのもその一つですね。
ただ赤く強調されるだけなら、とっても便利な機能がありますで終了なのですが、
この機能、該当箇所を強調するだけじゃなく、改行まで入っちゃうのです。

 

sample:元々の表示

28日記事のサンプル画像１

 

sample:エラーになったときの表示

28日記事のサンプル画像２

かなりカッコ悪いことになっています。
サイトのクオリティを考えれば、
ぜひとも元の表示のように1行の状態で赤枠が出る状態にしたいですね。

そこで、アラートが表示されている状態でhtmlのソースを覗いてみると、

<div class="fieldWithErrors"><input id="hoge" name="hoge[hoge]" type="text" value="" /></div>

と書かれています。
犯人は<div>ですね。
<div>はブロック要素なので、閉じた後に改行されるのは仕様です。
デザイン的な制御はスタイルシートの仕事なので、
スタイルシートで「class="fieldWithErrors"」を探してみると

.fieldWithErrors {
  padding: 2px;
  background-color: red;
  display: table;
}

デフォルトではこんなカンジになってます。
これを下のように書き換えます。

.fieldWithErrors {
  padding: 3px;
  border:2px solid red;
  display: inline;
}

これで表示を確認してみると…

28日記事のサンプル画像３

いいカンジ。

PCサイトだけならこれで完了でいいのですが、
mobileサイトはスタイルシートですべて解決もちょっと難しいところ。
そもそも、該当箇所が<div>ではなくて<span>でくくられれば、
勝手に改行されることはなくなります。

そこで、environment.rbの最後の行あたりに以下の一行を追加します。

ActionView::Base.field_error_proc = Proc.new {|html_tag, instance|  %(<span class="fieldWithErrors">#{html_tag}</span>)}

これで挿入されるタグが<span>になります。

28日記事のサンプル画像４

<div>の時はあった上下の余白もなくなってさらにいいカンジ。
（上下の余白はスタイルシートでも制御できますけど）

<span>は元々インライン要素なので、
さっき手直ししたスタイルシートの「display:inline」を削除します。
別に書いてあっても問題はありませんが、
いらないものは取ってしまいましょう。

.fieldWithErrors {
  padding: 3px;
  border:2px solid red;
}

これで完了。
（あってもなくてもいい部分だったので、表示は変わりません。）

コメント (0)  |トラックバック (0)

ブックマークに追加する Subscribe with livedoor Reader あとで読む

トラックバック URL

この記事にコメントする

ニックネーム:
メールアドレス:
URL:


KBMJのWebソリューション
Ruby on Rails Summer Festival 2008開催決定！！

TOPICS

2008/06/25
「ZD Net Builder」の連載記事です。第四回は「Rubyでどう書く？：重複したRSSをまとめる」が掲載されました。

2008/05/30
「ZD Net Builder」の連載記事です。第三回は「Rubyでどう書く？：Rubyで特定URLの画像パス一覧を表示する」が掲載されました。

2008/05/07
「ZD Net Builder」に連載を始めました。第二回は「Rubyでどう書く？：RubyでPDF履歴書を作成する」が掲載されました。

2008/04/24
「アットマーク・アイティ」に『 Rubyを使ってPaSoRi経由でSuicaの乗車履歴を取得し、GoogleMapsやGoogleEarthで表示する』が掲載されました。

カテゴリ

全体のRoR最新ブログ一覧

プロフィール

  • imai
  • rubyどころか開発すらも始めたばかりな超初心者のrailsとの格闘メモリー。
    初心者がつまづきそうなよくあるトラブルとか、意味不明としか思えない用語を初心者レベルに翻訳したりとかとかとか。

ブログの購読

RSS

timelog
株式会社ケイビーエムジェイロゴ