标签和输入的简单表格控制宽度(带有引导程序)

时间:2019-03-10 01:11:53

标签: ruby-on-rails twitter-bootstrap simple-form ruby-on-rails-5.2

我正在使用Simple_form和Bootstrap。

我想使用水平包装纸,但是我需要使标签变宽,输入变窄。我想通过bootstrap 4 vs custom css来做到这一点。

标签和输入应该在同一行(内联)上,并且右对齐。

col-md-8(用于标签)和col-md-4(用于输入)。我该怎么办?

 <%= f.input :role, :wrapper =>:horizontal_range, input_wrapper_html: { class: "col-md-4"}, label_wrapper_html: {class: "col-md-8"} %>

编辑:我应该添加f.input:role包含在

<div class='row'>
  <div class='col-md-6"> 
      f.input :role 
  </div>
</div>

第二,

我需要在输入末尾添加一个%。但是,它似乎不起作用。

 <%= f.input :pct_of_car , append: "%",  :wrapper =>:horizontal_range %>

但是,这似乎不起作用。我的语法有什么问题?

第三,如何将垂直collection_inline修改为2或3列?

  # vertical input for inline radio buttons and check boxes
  config.wrappers :bs_vertical_collection_inline, item_wrapper_class: 'form-check form-check-inline', tag: 'fieldset', class: 'form-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
    b.use :html5
    b.optional :readonly
    b.wrapper :legend_tag, tag: 'legend', class: 'col-form-label pt-0' do |ba|
      ba.use :label_text
    end
    b.use :input, class: 'form-check-input', error_class: 'is-invalid', valid_class: 'is-valid'
    b.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback d-block' }
    b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
  end

当前,所有复选框都是内联列出的,没有任何结构。我需要在2或3列中列出这些选择,以便于阅读。这也是一长串,因此可能需要将选择内容包装在滚动框中。

2 个答案:

答案 0 :(得分:2)

要为inputlabel设置类别,请使用input_htmllabel_html

<%= f.input :role, :wrapper => :horizontal_range, input_html: { class: "col-md-4"}, label_html: {class: "col-md-8"} %>

关于第二个问题-如果您不使用提示,则最简单的解决方案可能是这样做:

<%= f.input :pct_of_car , hint: "%",  :wrapper =>:horizontal_range %>

然后,您可以通过使用hint_html选项向提示添加自定义类(类似于input_htmllabel_html)来设置其样式。

更新

添加自定义文本的更好解决方案是使用block作为输入:

<%= f.input(:role, :wrapper => :horizontal_range, label_html: {class: "col-md-8"}) do %>
  <div class='col-md-4'>
    <%= f.input(:role, components: [:input], :wrapper => false, label: false) %>
    <span>%</span>
  </div>
<% end %>

由于这一点,您的标签具有col-md-8类,并且带有文本的输入都被col-md-4类包裹在div中。

答案 1 :(得分:2)

您需要定义自己的自定义包装或修改默认包装。

首先,请确保您的存储库中有默认包装器。

如果找不到calc,请运行rails g simple_form:install --bootstrap

第二,在此初始化程序中找到Bootstrap网格类。对于水平形式,可以在如下所示的块中找到它们:

app/initializers/simple_form_bootstrap.rb

第三,更换包装纸!

在此代码段中,将config.wrappers :horizontal_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b| b.use :html5 b.use :placeholder b.optional :maxlength b.optional :minlength b.optional :pattern b.optional :min_max b.optional :readonly b.use :label, class: 'col-sm-3 control-label' b.wrapper tag: 'div', class: 'col-sm-9' do |ba| ba.use :input, class: 'form-control' ba.use :error, wrap_with: { tag: 'span', class: 'help-block' } ba.use :hint, wrap_with: { tag: 'p', class: 'help-block' } end end 更改为col-sm-9。 还将col-sm-8更改为col-sm-3

完成

保存。重新启动Rails服务器。现在,所有表格将具有33%的宽度标签和66%的宽度输入。

如果您不想在全局范围内应用此选项,请将col-sm-4选项传递给任何wrapper: :my_wrapper并创建一个新的自定义包装器,即可完成您希望的操作。

一定喜欢SimpleForm!