Rails 4, Bootstrap 3, simple_form - style does not work

Question

In the past, I used rails 3.x bootstrap 2.x and simple_form with great success. However, I tried to create a new (not updated) Rails 4 / Bootstrap 3 application, and although the simple_form syntax can be used and even use nested forms, it seems that the style does not work. I used rails-bootstrap forms in a non-model form and that style looks great, however I would prefer to use simple_form for most of my forms.

My files are as follows

a rock

source 'https://rubygems.org' gem 'rails', '4.1.6' gem 'mysql2' gem 'jquery-rails' gem 'devise' gem 'sass-rails' gem 'coffee-rails', '~> 4.1.0' gem 'bootstrap-sass', '~> 3.2.0' gem 'autoprefixer-rails' gem 'therubyracer', '0.11.4', :platforms => :ruby gem 'uglifier', '>= 1.3.0' gem 'jquery-ui-rails' gem 'less-rails' gem 'font-awesome-rails' gem 'bootstrap_form' gem 'jbuilder', '~> 2.0' gem 'sdoc', '~> 0.4.0', group: :doc gem 'jquery-turbolinks' gem 'turbolinks', '1.3.0' #Forms and user entry gem 'simple_form' gem 'cocoon' gem 'country_select' gem "ckeditor" gem "gon" 

application.css.scss

 /* *= require_self *= require rails_bootstrap_forms *= require font-awesome *= require_tree . */ @import "bootstrap-sprockets"; @import "bootstrap"; 

I have two initializers that have not been changed by simple_form.rb and simple_form_bootstrap.rb

and a shape similar to the following

 <%= simple_form_for @item, :html => { :class => 'form-horizontal' } do |f| %> <% if f.error_notification %> <div class="alert alert-error fade in"> <a class="close" data-dismiss="alert" href="#">&times;</a> <%= f.error_notification %> </div> <% end %> <%= f.input :user_id, :as => :hidden, :input_html => { :value => @userid } %> <%= f.association :category %> <%= f.input :name %> <%= f.input :description %> <%= f.input :cool %> <%= f.input :cold %> <%= f.button :submit, :class => 'btn-primary' %> <%= link_to t('.cancel', :default => t("helpers.links.cancel")), items_path, :class => 'btn btn-default' %> <% end %> 

which is displayed as follows

  <div class="control-group hidden item_user_id"><div class="controls"><input class="hidden" id="item_user_id" name="item[user_id]" type="hidden" /></div></div> <div class="control-group select optional item_category"><label class="select optional control-label" for="item_category_id">Category</label><div class="controls"><select class="select optional" id="item_category_id" name="item[category_id]"><option value=""></option> <option selected="selected" value="1">Option 1</option> <option value="3">Option 2</option> <option value="4">Option 3</option> <div class="control-group string optional item_name"><label class="string optional control-label" for="item_name">Name</label><div class="controls"><input class="string optional" id="item_name" name="item[name]" type="text" value="Underwear" /></div></div> <div class="control-group string optional item_description"><label class="string optional control-label" for="item_description">Description</label><div class="controls"><input class="string optional" id="item_description" name="item[description]" type="text" value="test" /></div></div> <div class="control-group boolean optional item_warm"><label class="boolean optional control-label" for="item_warm">Warm</label><div class="controls"><input name="item[warm]" type="hidden" value="0" /><label class="checkbox"><input checked="checked" class="boolean optional" id="item_warm" name="item[warm]" type="checkbox" value="1" /></label></div></div> <div class="control-group boolean optional item_cool"><label class="boolean optional control-label" for="item_cool">Cool</label><div class="controls"><input name="item[cool]" type="hidden" value="0" /><label class="checkbox"><input checked="checked" class="boolean optional" id="item_cool" name="item[cool]" type="checkbox" value="1" /></label></div></div> 

In particular, the checkboxes look very bad, as shown below.

Has anyone had similar problems, or am I just doing something a little stupid?

any thoughts are gratefully accepted

Answer 1

It seems that the default version of simple_form does not work with Bootstrap 3. Therefore, I had to modify the gem file to read the following:

 gem 'simple_form', '~> 3.1.0.rc1', github: 'plataformatec/simple_form', branch: 'master' 

This resolved the issue as soon as I restarted the initializer and restarted the application.

Answer 2

You are correct about the version in the Gemfile, I also found that forms are improved using this syntax:

 <%= simple_form_for @item, html: {class: 'form-horizontal'}, 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.input :sample_model_field%> <div class="form-group"> <div class="col-sm-offset-3 col-sm-9"> <%= f.button :submit %> </div> </div> <% end %> 

You can also see an example of application code:

https://github.com/rafaelfranca/simple_form-bootstrap