Last active
October 5, 2021 20:03
Revisions
-
chunlea revised this gist
Apr 20, 2014 . 1 changed file with 3 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -3,4 +3,6 @@ Finally, Simple Form support Boostrap 3. :clap: But I found it still dosen't support some components in Bootstrap 3. Or may be in the future. But I can't wait, so I find a solution to support them. It was inspired by https://github.com/plataformatec/simple_form/pull/531#issuecomment-5629150 . This is a final solution and I used in my project.  -
chunlea renamed this gist
Apr 20, 2014 . 1 changed file with 0 additions and 0 deletions.There are no files selected for viewing
File renamed without changes. -
chunlea created this gist
Apr 20, 2014 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,6 @@ Finally, Simple Form support Boostrap 3. :clap: But I found it still dosen't support some components in Bootstrap 3. Or may be in the future. But I can't wait, so I find a solution to support them. It was inspired by https://github.com/plataformatec/simple_form/pull/531#issuecomment-5629150 . This is a final solution and I used in my project. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,30 @@ # File here config/initializers/simple_form_bootstrap.rb SimpleForm.setup do |config| config.wrappers :vertical_input_group, tag: 'div', class: 'form-group', error_class: 'has-error' do |b| b.use :html5 b.use :placeholder b.use :label, class: 'control-label' b.wrapper tag: 'div' do |ba| ba.wrapper tag: 'div', class: 'input-group col-sm-12' do |append| append.use :input, class: 'form-control' end ba.use :error, wrap_with: { tag: 'span', class: 'help-block' } ba.use :hint, wrap_with: { tag: 'p', class: 'help-block' } end end config.wrappers :horizontal_input_group, tag: 'div', class: 'form-group', error_class: 'has-error' do |b| b.use :html5 b.use :placeholder b.use :label, class: 'col-sm-3 control-label' b.wrapper tag: 'div', class: 'col-sm-9' do |ba| ba.wrapper tag: 'div', class: 'input-group col-sm-12' do |append| append.use :input, class: 'form-control' end ba.use :error, wrap_with: { tag: 'span', class: 'help-block' } ba.use :hint, wrap_with: { tag: 'p', class: 'help-block' } end end end This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,121 @@ <div class="page-header clearfix"> <div class="pull-left"> <h1>Vertical Form<small></small></h1> </div> <div class="pull-right"> <div class="btn-group"> <%= link_to 'Back', sales_groups_path, class: "btn btn-default" %> <%= link_to 'Show', @sales_group, class: "btn btn-default" %> </div> </div> </div> <!-- <%= render 'form' %> --> <%= simple_form_for(@sales_group, wrapper: :vertical_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.error_notification %> <div class="form-inputs"> <%= f.input :name, wrapper: :vertical_input_group, hint: "Google" do %> <span class="input-group-addon">Prepend stuff</span> <%= f.input_field :name, class: "form-control" %> <span class="input-group-addon">Append stuff</span> <% end %> <%= f.input :state, wrapper: :vertical_input_group, hint: "Google" do %> <span class="input-group-addon"> <input type="checkbox"> </span> <%= f.input_field :state, class: "form-control" %> <span class="input-group-addon"> <input type="radio"> </span> <% end %> <%= f.input :state, wrapper: :vertical_input_group, hint: "Google" do %> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> <%= f.input_field :state, class: "form-control" %> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <ul class="dropdown-menu pull-right"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> <% end %> <hr> </div> <div class="form-actions col-sm-offset-3"> <%= f.button :submit %> </div> <% end %> <div class="page-header clearfix"> <div class="pull-left"> <h1>Horizontal Form<small></small></h1> </div> <div class="pull-right"> <div class="btn-group"> <%= link_to 'Back', sales_groups_path, class: "btn btn-default" %> <%= link_to 'Show', @sales_group, class: "btn btn-default" %> </div> </div> </div> <%= simple_form_for(@sales_group, 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.error_notification %> <div class="form-inputs"> <%= f.input :name, wrapper: :horizontal_input_group, hint: "Google" do %> <span class="input-group-addon">Prepend stuff</span> <%= f.input_field :name, class: "form-control" %> <span class="input-group-addon">Append stuff</span> <% end %> <%= f.input :state, wrapper: :horizontal_input_group, hint: "Google" do %> <span class="input-group-addon"> <input type="checkbox"> </span> <%= f.input_field :state, class: "form-control" %> <span class="input-group-addon"> <input type="radio"> </span> <% end %> <%= f.input :state, wrapper: :horizontal_input_group, hint: "Google" do %> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> <%= f.input_field :state, class: "form-control" %> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <ul class="dropdown-menu pull-right"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> <% end %> <hr> </div> <div class="form-actions col-sm-offset-3"> <%= f.button :submit %> </div> <% end %>