css - “field-with-errors” 包装器在 ruby​​ on rails 中使用 <pre> 标记更改页面外观

Question

我正在使用 <div class="field_with_errors">使用 twitter bootstrap 显示验证错误。但是当出现验证错误时，这些会在控件之间产生额外的空间，导致整个 UI 被破坏，正如您从图像中看到的那样。如何避免这个额外的空间。第二件事，我想在不在下面的控件前面显示验证错误。怎么可能。当我尝试使用 Firbug 调试此 css 时，我知道有 <pre> </pre> HTML tae 和它们造成了这个额外的空间。我在图像中添加了红色以增加额外空间。

请建议我如何避免这个额外的空间并在控件的右侧(前面)获得验证错误。如果您需要粘贴更多代码，请告诉我。

Answer 1

默认情况下，Rails 会将一个 block 元素注入(inject)到您的表单中。这里是

<div class="field_with_errors">

来自。为了避免额外的空间，您需要让 Rails 注入(inject)一个内联元素，例如 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