css - “field-with-errors” wrapper changes the page appearance with tag in ruby on rails

Question

I am using <div class="field_with_errors"> to show validation errors with twitter bootstrap. But when validation error appears, these create extra space between controls that cause whole UI gets broken as you can see from image. How to avoid this extra space. Second thing that I want to display validation errors in front of controls not below. How it would be possible. When I tried to debug this css using Firbug, I got to know there is <pre> </pre> HTML tae and they causing this extra space. I have put red color for extra space in image.

Please suggest me how to avoid this extra space and get validation errors on right side of controls (infront). Please let me know if you need more code to be pasted.

Answer 1

默认情况下，Rails 会在表单中注入一个块元素。这是哪里

<div class="field_with_errors">

来自。为了避免额外的空间，你需要让 Rails 注入一个内联元素，比如 span。为此，请config/application.rb包含以下内容：

module YourApp
  class Application < Rails::Application

    config.action_view.field_error_proc = Proc.new do |html_tag, instance|
      "<span class=\"field_with_errors\">#{html_tag}</span>".html_safe
    end

  end
end

此配置为 Rails 提供了一个 Proc 函数来调用，该函数现在将生成您的表单错误元素。您可以根据自己的喜好更改此 html。您可以在此处找到更多信息：http: //guides.rubyonrails.org/configuring.html#configuring-action-view