0

私は古い学校かもしれません、そして私は多くのdiv / spanの試みを経験し、一度にテーブルを誓いました、しかしテーブルのいくつかの良い使用法があります、それらの1つ、imhoはフォームです。ラベルフィールドを別の背景色でシェーディングすることを好みます。私はいくつかの方法を試しましたが、入力（実際にはどちらか）側が幅をオーバーフローすると、ラベルの背景が台無しになります。別の試みを検討したいと思いますが、私はテーブルアプローチを本当に好みます。

2.xでは、構成を次のように設定しました。

config.wrappers :tag => :tr, :class => :input,
  :hint_class => :field_with_hint, :error_class => :field_with_errors do |b|

  b.use :label, :wrap_with => {:tag => :td, :class => :label}
  b.use :input, :wrap_with => {:tag => :td, :class => :input}
  b.use :hint,  :wrap_with => { :tag => :span, :class => :hint }
  b.use :error, :wrap_with => { :tag => :caption, :class => :error }

エラーを除いて、うまく機能します！私は最初にそれをスパンとして持っていて、それはテーブルの一番上に行きました。次に、それをキャプションに設定します。少なくともSafariでは、tbodyを終了してキャプションを挿入し、別のtbodyを開始しますが、テーブルフローが台無しになります。

エラーを強制的に入力ラッパーに含める方法はありますか？または他のアプローチ？足場アプローチのようにメインメッセージにエラーを入れることも受け入れます（そしておそらくこれが私がすべきことです）。私がこれを書き始めるまでそれについて考えませんでした、しかし私は単純なフォームエラーのものを使うことができなかったと思いますそして足場アプローチに戻ることができませんでした。

少なくとも私はあなたがそれをすることができると思います。たとえば、通常のform_for input（f.text_fieldなど）をf.inputと組み合わせて使用​​できることを知りませんでした（ドキュメントでは見つかりませんでしたが、実際にはよく見えませんでした！）。City、St、Zipを1列に並べるなどに最適です。

4

1 に答える 1

0

私は自分の質問に答えるべきだと思います。結局、Simple Formsエラー通知を使用せず、scaffoldメソッドに戻りました。

ラッパーを次のように構成しました。

config.wrappers :tag => :tr, :class => :input,
  :hint_class => :field_with_hint, :error_class => :field_with_errors do |b|
    b.use :label, :wrap_with => {:tag => :td, :class => :label}
    b.use :input, :wrap_with => {:tag => :td, :class => :input}

エラーのヘルパーメソッドを作成しました。

def show_form_errors(instance)
  if instance.errors.any?
    errors = content_tag(:h2, pluralize(instance.errors.count, "error") +"prohibited this project from being saved:")
    list = content_tag :ul do
      e = ""
      instance.errors.full_messages.each do |msg|
        e <<"<li>#{msg}</li>"
      end
      e.html_safe
    end
    return content_tag(:div, (errors + list),:id => "error_explanation").html_safe
  end
end

# instead of
  # = f.error_notification
# I used
  # = show_form_errors(@event)

テーブルの行（border-bottomのみ）に境界線を定義したため、error_explanationのCSSを微調整し、trを赤い境界線で囲むために！importantを追加する必要がありました。

.field_with_errors {
  padding: 2px;
  border:solid 3px red!important;
  background-color:pink;
}

正常に動作し、この方法に満足しています。

于 2013-02-10T14:41:39.103 に答える