Bootstrap 3 + simple_forms Checkboxen

Question

Ich versuche Bootstrap 3 mit Simple_forms (von Master) zu integrieren.

Gerade jetzt, ich habe folgendes:

config/initializers/simple_form.rb:

SimpleForm.setup do |config| 
    config.wrappers :default, class: :input, 
    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 
    b.use :label_input 
    b.use :hint, wrap_with: { tag: :span, class: :hint } 
    b.use :error, wrap_with: { tag: :span, class: :error } 
    end 

    config.default_wrapper = :default 
    config.boolean_style = :nested 
    config.button_class = 'btn' 
end 

config/initializers/simple_form_bootstrap.rb:

SimpleForm.setup do |config| 
    config.input_class = 'form-control' 

    config.wrappers :bootstrap, tag: 'div', class: 'form-group', error_class: 'error' do |b| 
    b.use :html5 
    b.use :placeholder 
    b.use :label 
    b.wrapper tag: 'div', class: 'controls' do |ba| 
     ba.use :input 
     ba.use :error, wrap_with: { tag: 'span', class: 'help-inline' } 
     ba.use :hint, wrap_with: { tag: 'p', class: 'help-block' } 
    end 
    end 

    config.wrappers :prepend, tag: 'div', class: "form-group", error_class: 'error' do |b| 
    b.use :html5 
    b.use :placeholder 
    b.use :label 
    b.wrapper tag: 'div', class: 'controls' do |input| 
     input.wrapper tag: 'div', class: 'input-prepend' do |prepend| 
     prepend.use :input 
     end 
     input.use :hint, wrap_with: { tag: 'span', class: 'help-block' } 
     input.use :error, wrap_with: { tag: 'span', class: 'help-inline' } 
    end 
    end 

    config.wrappers :append, tag: 'div', class: "form-group", error_class: 'error' do |b| 
    b.use :html5 
    b.use :placeholder 
    b.use :label 
    b.wrapper tag: 'div', class: 'controls' do |input| 
     input.wrapper tag: 'div', class: 'input-append' do |append| 
     append.use :input 
     end 
     input.use :hint, wrap_with: { tag: 'span', class: 'help-block' } 
     input.use :error, wrap_with: { tag: 'span', class: 'help-inline' } 
    end 
    end 

    config.default_wrapper = :bootstrap 
end 

app/ansichten/devise/sessions/new.html.haml

%div.panel.panel-auth 
    %div.panel-heading 
    %h3.panel-title Sign in 
    %div.panel-body 
    = simple_form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| 
     .form-inputs 
     = f.input :email, :required => false, :autofocus => true 
     = f.input :password, :required => false 
     = f.input :remember_me, :as => :boolean if devise_mapping.rememberable? 
     .form-actions 
     = f.button :submit, "Sign in" 
     %hr 
    = render "devise/shared/links" 

Aber das generierte HTML ist falsch. Nun, es ist richtig nach BS2, aber falsch nach BS3. Hier ist sie:

<div class="form-group boolean optional user_remember_me"> 
    <label class="boolean optional control-label" for="user_remember_me"> 
    Remember me 
    </label> 
    <div class="controls"> 
    <input name="user[remember_me]" type="hidden" value="0"> 
    <label class="checkbox"> 
     <input class="boolean optional form-control" id="user_remember_me" name="user[remember_me]" type="checkbox" value="1"> 
    </label> 
    </div> 
</div> 

Aber es sollte eigentlich so etwas wie:

<div class="checkbox"> 
    <label> 
     <input type="checkbox"> Check me out 
    </label> 
    </div> 

Es ist wahrscheinlich möglich zu beheben diese um Wrapper Hacking, aber ich kann nicht daran zu arbeiten. Kann mir jemand dazu einen Rat geben?

Prost

Answer 1

Wie Sie gesagt haben, Sie können es mit einem benutzerdefinierten Wrapper arbeiten bekommen:

config.wrappers :checkbox, tag: :div, class: "checkbox", error_class: "has-error" do |b| 

    # Form extensions 
    b.use :html5 

    # Form components 
    b.wrapper tag: :label do |ba| 
     ba.use :input 
     ba.use :label_text 
    end 

    b.use :hint, wrap_with: { tag: :p, class: "help-block" } 
    b.use :error, wrap_with: { tag: :span, class: "help-block text-danger" } 
    end 

die Sie dann in Ihrer Eingabe Referenz:

= f.input :remember_me, :as => :boolean, :wrapper => :checkbox if devise_mapping.rememberable? 

Hinweis jedoch diese won‘ t arbeiten für collection_check_boxes:

= f.input :roles, as: :check_boxes, wrapper: :checkbox, collection: @employee_roles, label: false 

Sie könnten versuchen, einen benutzerdefinierten Eingang für den letzteren Fall zu hacken, aber es ist ein bisschen chaotisch. Vielleicht kennt jemand anders einen besseren Weg ... und vielleicht wird simple_form Bootstrap 3 bald genug einholen.

Answer 2

Hier ist ein schneller Weg, die Checkbox Problem zu beheben, während wir für Rafael warten Bootstrap3 zu implementieren: https://github.com/wtfiwtz/simple_form_bootstrap3/commits/master

Stellen Sie sicher, „config.bootstrap3 = true“ zu Ihrem initializer hinzufügen ...

Answer 3

Nächste Konfiguration funktioniert für mich perfekt mit Bootstrap 3:

SimpleForm.setup do |config| 
    ... 
    config.boolean_style = :inline 
    ... 
end 

einfache benutzerdefinierte Wrapper

config.wrappers :inline_checkbox, :tag => 'div', :class => 'checkbox', :error_class => 'has-error' do |b| 
    b.use :html5 
    b.use :placeholder 
    b.use :label_input 
end 

Verbrauch:

= f.input :remember_me, :label => t('user.remember_me'), :as => :boolean, :wrapper => :inline_checkbox 

Answer 4

Ich habe nächste Anforderungen für meine Checkbox:

<div class="checkbox"> 
    <input type="hidden" value="0" name="..."> 
    <label> 
     <input type="checkbox" value="1" name="..."> Label text 
    </label> 
</div> 

Versteckte Eingabe wurde aus dem Label extrahiert, da das Kontrollkästchen beim Label-Klick nicht aktiviert ist. Ich weiß nicht, warum, aber ich war nicht in der Lage solche html zu generieren nur config so ist hier Config + individuelle Eingangsklasse

# Config 
config.wrappers :checkbox, tag: :div, class: "checkbox", error_class: "has-error" do |b| 
    # Form extensions 
    b.use :html5 
    b.use :placeholder 

    b.use :input 

    b.use :hint, wrap_with: { tag: :p, class: "help-block" } 
    b.use :error, wrap_with: { tag: :span, class: "help-block text-danger" } 
end 

# Input goes to app/inputs/inline_checkbox_input.rb 
class InlineCheckboxInput < SimpleForm::Inputs::Base 
    def input 
    out = '' 
    out << @builder.hidden_field(attribute_name, value: 0).html_safe 
    out << "<label>" 
    out << @builder.check_box(attribute_name, {}, 1, nil) 
    out << "#{options[:label]}</label>" 
    out 
    end 
end 

# Usage 
= f.input :name, :label => 'Label text', :wrapper => :checkbox, :as => :inline_checkbox 

Answer 5

Sie können dies nur verwenden:

<%= f.input :remember_me, as: :boolean, :label => false, :inline_label => "Remember me" if devise_mapping.rememberable? %> 

Answer 6

Ich fand eine wirklich einfache Lösung für Bootstrap 3 Checkboxen. Vorausgesetzt, dass Sie bereits die Bootstrap-3-Wrapper konfiguriert haben, alles, was ich tun musste, ist eine Eingabe benutzerdefinierte Add in app/inputs als checkbox_input.rb:

class CheckboxInput < SimpleForm::Inputs::BooleanInput 
    # this exists to make the default 'boolean' css class in the form-group to be 'checkbox' instead 
end 

und verwenden Sie es über: = f.input :remember_me, :as => :checkbox if devise_mapping.rememberable?

Dies wird die CSS ändern boolean auf die form-group wird stattdessen checkbox sein, die das richtige Styling bekommen wird.

Und hier ist eine Version für radio-inline

class RadioInlineInput < SimpleForm::Inputs::CollectionRadioButtonsInput 

    # by default, this omits labels. You should use f.label before this to stick a label where you would like. 
    def initialize(builder, attribute_name, column, input_type, options = {}) 
    super(builder, attribute_name, column, :radio_buttons, {label: false}.merge(options)) 
    end 

    def item_wrapper_class 
    'radio-inline' 
    end 
end 

als:

= f.label :frequency 
= f.input :frequency, collection: @membership_plan.interval_frequencies, as: :radio_inline