CODEWITHSUNDEEP
ruby-on-rails-3.2simple-form
olimart
olimart

Reputation: 1569

simple form and bootstrap 3

With the most recent changes on Bootstrap, I'd like to apply common css class input_html: {class: 'form-control'} to all elements but without manually doing it for all. Is there any way to make it by default. I haven't found any setting for that.

Upvotes: 0

Views: 1104

Answers (5)

Scott Bartell
Scott Bartell

Reputation: 2840

Within the simple from initializer use:

SimpleForm.setup do |config|
  config.label_class = 'control-label'
  ...
end

Upvotes: 0

JCC
JCC

Reputation: 463

I use this gist to replace my simple_form_boostrap.rb in app/config/initializers.

simple_form_bootstrap.rb Gist

Upvotes: 0

mwalsher
mwalsher

Reputation: 2790

You're better off changing the default wrapper in simple_form_bootstrap.rb in app/config/initializers.

E.g:

SimpleForm.setup do |config|
  config.wrappers :bootstrap, tag: :div, class: "form-group", error_class: "has-error" do |b|

    # Form extensions
    b.use :html5
    b.use :placeholder

    # Form components
    b.use :label
    # b.wrapper tag: :div do |ba|
    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
  end

  config.form_class = "form-horizontal"
  config.default_wrapper = :bootstrap

end

Upvotes: 7

NicoArbogast
NicoArbogast

Reputation: 413

jQuery could be a way of achieving this as Aaron Gong mentioned. It will save you the time of doing it manually but it actually adds an artificial step on the client side which may not be the cleanest solution.

You may also try with applying sass @extend (http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#extend) using css selectors to select the type of input you want to modify.

Example 

    input[type='email'], input[type='password'] {
      @extend .form-control;
    }

Upvotes: -2

Aaron Gong
Aaron Gong

Reputation: 1005

Using jQuery (but * for all elements can incur some performance issue)

$('*').addClass('form-control');

Hope it helps...

Upvotes: 0

Related Questions