Howto make twitter bootstrap compatible checkbox labels in simple_form? - ruby-on-rails

I'm trying to get two labels for one check box as described in Twitter Bootstrap's documentation. (see http://twitter.github.com/bootstrap/base-css.html#forms --> horizontal forms --> checkbox (below text input))
So what I want to display is a label for the description on the left, the check box itself and a hint right next to it on the right.
The standard implementation of twitter bootstrap in simple_form gem creates a <p> tag for displaying the hint since it tries to be consistent for all kinds of inputs.
I now want to create a custom wrapper for "bootstrap checkboxes" in the simple_form initializer but I just cannot figure out how to solve this.
This is how I currently implemented it using bare rails (erb):
<div class="control-group">
<%= f.label :recurring, :class => 'control-label' %>
<div class="controls">
<%= f.label :recurring, :class => 'checkbox' do %>
<%= f.check_box :recurring %>
<%= t('.recurring_hint') %>
<% end %>
</div>
</div>
Can you help me or at least try to explain how these custom wrapper thing works? Thank you!
Edit: Let me ask my question more precisely: Can I use simple_form's wrappers API to use a label as a wrapper?

Solution:
Update to newest version of simple_form (2.0.2, had 2.0)
Override BooleanInput:
app/inputs/boolean_input.rb
class BooleanInput < SimpleForm::Inputs::BooleanInput
def input
if nested_boolean_style?
template.label_tag(nil, :class => "checkbox") {
build_check_box + inline_label
}
else
build_check_box
end
end
end
_form.html.erb
Call in template:
<%= f.input :recurring, :inline_label => t('.recurring_hint') %>

With latest simple_form, the option is available out of the box.

You can install simple_form with bootstrap suport, so you don't need to write the wrappers like control-groups, etc.
Check this link on installation:
https://github.com/plataformatec/simple_form#twitter-bootstrap
What you need to do is just run the command:
rails generate simple_form:install --bootstrap
In this page you can see some examples, including horizontal checkboxes with bootstrap and simple_form: http://simple-form-bootstrap.plataformatec.com.br/articles/new
If you really want to use it the way you are doing, you need to add the class "inline" along with the "checkbox" on the label.

Related

How can I create a button which adds fields to a Rails form

I have a form in Rails which uses fields_for to accept nested attributes:
<%= form_with(model: #combat_tracker, url: form_url) do |f| %>
…
<%= f.fields_for :zones do |zone| %>
<div class="zone-field">
<%= zone.text_field :name %>
<%= zone.check_box :_destroy %>
<%= zone.label :_destroy, "Remove zone" %>
</div>
<% end %>
…
<% end %>
Currently this gives me input fields for any existing zones on #combat_tracker. I want to add a button that will dynamically add a new zone-fields div for a new zone to be added when the form is submitted.
I’m using Rails 7 and assume the solution will involve the use of Turbo or possibly Stimulus, but can’t quite figure out the best way to do this. Thanks.
I don't think you need Turbo or Stimulus. Take a look at cocoon gem, it should do exactly what you're looking for.
Explaining all process here is quite complex for me, but try to follow this guide if the gem's one is too long.

Nested forms using the Cocoon gem in Ruby on Rails 4.2

I'm building a web app using Rails 4.2 and I have a model called Strategy which has a has_many relationship to a Tactic model.
To create a view for Strategy, I need to have many nested Tactics on the form. I've been using the Cocoon gem to develop this view.
So far, I've been able to get the form to work properly for the most part but the issue is that I wanted to add a Type attribute to my Tactic model.
For a given strategy, I want to have 3 tactics of one given type, and 2 models of another.
The issue is that rendering my view, all five models are listed sequentially without any room for putting in my own HTML code around them.
Is there a simple way to separate out which of these are rendered? Right now, my view looks as follows...
<%= form_for #strategy do |f| %>
<div class="strategy">
<%= f.label :name %>
<%= f.text_field :name %>
</div>
<div class="tactics">
<%= f.fields_for :tactics do |i| %>
<%= render 'tactics_fields', f: i %>
<% end %>
</div>
<div class="buttons">
<%= f.button "Save Strategy", class: 'button' %>
</div>
<% end %>
If anyone can offer any advice, it would be greatly appreciated.
Are you wanting the form to be rendered so that each Strategy has exactly 5 Tactics listed below it, of which 3 are of one type and 2 are of another?
If so, you can do this in your controller:
5.times do
tactic = #strategy.tactics.build
tactic.tactic_type = 'tactic_type'
end
Also, note that using an attribute called type is not a good idea. Use something like tactic_type instead.

How to use the Countries gem

I am trying to use the Countries Gem, but had some basic questions on how to incorporate this gem after I've bundle-installed it.
Do I need to create a new controller/model to access the countries?
How do I create a simple select drop-down to show a list of countries for a user to select?
Where are all the countries stored? (I saw the data file in the Gem, but need some clarity how to bring that into my own app)
1) You don't need a new controller/model to access the countries
2) There is an example app on the README page which shows you how to use forms and dropdowns.
3) The countries are stores within the app. I believe country_select includes the ISO 3166 gem to get the list of countries. You can view the data in the countries.yaml file
If want to know anything else, I recommend looking at the example app. It provides a good example of how to use the gem.
You do not need to create a new controller/model to work with the gem.
In order for you to create dropdown, just install the country_select gem (as stated in the doc)
Then to use it, just do that in your views:
country_select(:your_model_name, :your_attribute_name)
To integrate it in a form_for with some extra params like Bootstrap classes or default country selected:
<%= form_for #message, url: contact_path, html: { :class => "form-horizontal " } do |f| %>
<div class="form-group">
<%= f.label :country, :class => "col-md-3 control-label" %>
<div class="col-md-9">
<%= f.country_select :country, ["United States"], {}, { :class => "form-control" } %>
</div>
</div>
<%= f.submit "Submit", :class => "btn btn-default" %>
<% end %>
For the exact options you have w/ this method, see here:
country_select(method, priority_or_options = {}, options = {}, html_options = {})
Hope it helps !

Is it possible to use best_in_place with typeahead from twitter bootstrap?

Basically, I am using best_in_place in my rails webapp to let users edit their profile info in place. The thing is, I would like users to be presented with a typeahead form for certain entries.. Here's what I'm working with:
<p>College/University: <input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="8" data-source='["University of Pennsylvania","Harvard","Yale","Princeton","Cornell","Brown","Columbia","Dartmouth"]'></p>
This gives me a working form box with typeahead. However, I want to be able to wrap this in best_in_place with something like
<%= best_in_place #student, :education %>
so that users only see the typeahead form when they click on the text, and upon clicking away from the box or hitting enter the selection is stored in the database.
Is there a reasonably easy way to do this?
On any Ruby on rails helper method, such as best_in_place, you can just add the :html_attrs option. Here is a sample of what yours might looks like:
<%= best_in_place #student, :education, :type=> :input,
:html_attrs => {:'data-provide' => "typeahead", // Any other attributes
:'data-source' => '["University of Pennsylvania","Harvard","Yale","Princeton","Cornell","Brown","Columbia","Dartmouth"]' %>
Hope this helps!

Rails: Using simple_form and integrating Twitter Bootstrap

I'm trying to build a rails app and simple_form looks to be a really useful gem. Problem is that I am using twitter bootstrap css to do the styling and the simple_form doesn't allow you to specify the layout of the html.
Can anyone tell me how I can conform the simple_form html into the format bootstrap css wants?
Note: This answer only applies to SimpleForm < 2.0
Start with this in config/initializers/simple_form.rb:
SimpleForm.form_class = nil
SimpleForm.wrapper_class = 'clearfix'
SimpleForm.wrapper_error_class = 'error'
SimpleForm.error_class = 'help-inline'
Then there's space missing between the label element and the input, which you can add with this:
label {
margin-right: 20px;
}
There's probably more, but it's a start.
Simple form 2.0 is bootstrap-aware:
rails generate simple_form:install --bootstrap
I recently had the same problem and tried out the combination of bootstrap-sass and formtastic-bootstrap.
It works with the exactly same code as the code for formtastic and shows even error messages as expected.
bootstrap-sass also works with Rails 3.1 Asset Pipeline and Rails 3.0. formtastic-bootstrap is tested with RSpec so I think this is a nice way to go!
I wrote a gem to do exactly this. It's not simple_form, but it should work fine side-by-side: twitter_bootstrap_form_for.
Here's the full config (config/initializers/simple_form.rb):
SimpleForm.setup do |config|
config.hint_class = 'help-block'
config.error_class = 'help-inline'
config.wrapper_class = 'clearfix'
config.wrapper_error_class = 'error'
config.label_text = lambda { |label, required| "#{label} #{required}" }
config.form_class = nil
end
simple_form allows for a css class (Passing in :html => {:class => nil} will result in only a "simple_form" class.).
n.b. This was added on 7/25/2011 so many existing downloads and documentation will not have it. You could also wrap it in a div that specifies a style.
You can also always style an individual element with code such as
<%= f.input :username, :label_html => { :class => 'my_class' } %>
I found this, seems working fine https://github.com/rafaelfranca/simple_form-bootstrap don't known about tight integration
If you use SimpleForm 1.5 the authors of the gem provide you with the required configuration instructions here: https://github.com/plataformatec/simple_form/wiki/Twitter-Bootstrap-integration
In this railscast: http://railscasts.com/episodes/329-more-on-twitter-bootstrap, you can see how to customize simple_form with twitter bootstrap (skip to 3:05).
terminal :
rails g simple_form:install --bootstrap
model/_form.html.erb :
<%= simple_form_for #product, :html => { :class => 'form-horizontal' } do |f| %>
<fieldset>
<legend><%= controller.action_name.capitalize %> Product</legend>
<%= f.input :name %>
<%= f.input :price %>
<div class="form-actions">
<%= f.submit nil, :class => 'btn btn-primary' %>
<%= link_to 'Cancel', products_path, :class => 'btn' %>
</div>
</fieldset>
<% end %>

Resources