Question

在我的水平形式中，除文件输入外，我的所有输入元素都正确对齐。

它们占据100％的宽度并浮动到左侧。

在我的simple_form_bootstrap.rb中，我的包装器似乎配置正确，标签为3，输入为9 ..但不知何故在生成的html中，它没有被考虑在内。

打包机：

config.wrappers :horizontal_file_input, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label, class: 'col-sm-3 control-label'

    b.wrapper tag: 'div', class: 'col-sm-9' do |ba|
      ba.use :input
      ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
    end
  end

表格标题：

<%= simple_form_for(@post, html: { class: 'form-horizontal', role: "form", multipart: true },
        wrapper: :horizontal_form,
        wrapper_mappings: {
          check_boxes: :horizontal_radio_and_checkboxes,
          radio_buttons: :horizontal_radio_and_checkboxes,
          file: :horizontal_file_input,
          boolean: :horizontal_boolean
        }) do |f| %>
  <%= f.error_notification %>

表单中的表单输入

 <%= f.fields_for :assets do |builder| %>
    <%= builder.input :attachment, as: :file, :label => "Image:" %>
  <% end %>

生成的html

<div class="form-group file optional post_assets_attachment">
<label class="file optional control-label" for="post_assets_attributes_0_attachment">
Image:</label>
<input class="file optional form-control" id="post_assets_attributes_0_attachment" name="post[assets_attributes][0][attachment]" type="file">
</div>

为什么simple_form设置不适用于文件输入？

Answer 1

在简单形式的3.1.0.rc1示例应用程序中找到我的答案。

看起来在表单标题中指定包装器由于某种原因而无法正常工作。不得不将其直接应用于输入。

我改变了：

<%= builder.input :attachment, as: :file, :label => "Image:" %>

到

<%= builder.input :attachment, as: :file, :label => "Image:", wrapper: :horizontal_file_input  %>

现在它完美无缺。

文件输入未与其余输入对齐

1 个答案: