5

2行の水平フォームを使用simple-formして生成したい。bootstrap最初の行には 2 つの入力が並んでいる必要があります。1 つは 1 つのラベルを持つ名の入力で、2 番目の行には電子メールの入力が必要です。私の問題は、最初の行のラベルがcontrol-label、水平フォームを正しくレンダリングするために必要なクラスを取得していないことです。ただし、すべての適切なクラスがemailフィールドに適用されています。

以下は私のコードです：

= simple_form_for @order, :url => '/product/process_order', :html => {:class => 'form-horizontal'} do |f|
  .form-inputs
    .control-group
      = f.label :first, "Full and last name"
      .controls
        = f.input_field :first, :class => "span2", :placeholder => 'First'
        = f.input_field :last,  :class => "span3" , :placeholder => 'Last'

    = f.input :email, :placeholder => 'you@example.com'

生成するもの:

<form accept-charset="UTF-8" action="/product/process_order" class="simple_form form-horizontal" id="new_order" method="post" novalidate="novalidate">
  <div class="form-inputs">
    <div class="control-group">
       <label for="order_first">Full and last name</label>
         <div class="controls">
           <input class="string required span2" id="order_first" name="order[first]" placeholder="First" size="50" type="text">
           <input class="string required span3" id="order_last" name="order[last]" placeholder="Last" size="50" type="text">
         </div>
     </div>
     <div class="control-group email required">
       <label class="email required control-label" for="order_email">
         <abbr title="required">*</abbr> Email
       </label>
       <div class="controls"><input class="string email required" id="order_email" name="order[email]" placeholder="you@example.com" size="50" type="email"></div>
     </div>
   </div>
 </form>
4

2 に答える 2

1

config/initializers/simple_form.rbファイルで label class 行を見つけて、次のように設定します。

config.label_class = 'control-label'

また、ブートストラップを使用している場合は、このファイルで他のいくつかのことを行うことができます。これはあなたにも役立つかもしれません：

SimpleForm.setup do |config|
  config.wrappers :my_wrapper, :class => 'control-group',
    :hint_class => :field_with_hint, :error_class => :field_with_errors do |b|

    b.use :html5

    b.use :placeholder

    b.optional :maxlength

    b.optional :pattern

    b.optional :min_max

    b.optional :readonly

    ## Inputs
    b.use :label
    b.wrapper :my_wrapper, :tag => 'div', :class => 'controls' do |ba|
      ba.use :input
      ba.use :error, :wrap_with => { :tag => 'span', :class => 'label label-important' }
      ba.use :hint,  :wrap_with => { :tag => 'p', :class => 'help-block' }
    end
  end

  config.default_wrapper = :my_wrapper

  config.boolean_style = :nested

  config.button_class = 'btn'

  config.error_notification_tag = :div

  config.error_notification_class = 'alert alert-error'

  config.label_class = 'control-label'

  config.form_class = 'form-horizontal'

  config.generate_additional_classes_for = [:wrapper, :label, :input]
  config.browser_validations = true
end
于 2013-04-30T15:38:01.667 に答える