I want to use Bootstrap checkboxes.
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
How do I integrate it into a Rails application?
I would like to use them in a form. Specifically, how can I send and catch the selected data?
UPDATE:
I know how to use checkboxes in Rails. I don't understand how can I set their style via bootstrap.
Checkbox is - <input type="checkbox">Simple</input>
Bootstrap checkbox is <button type="button" class="btn btn-primary">Bootstrap</button>
UPDATE 2:
As example, see my question about radio buttons.
For example you can delete an item like this:
<p>Delete item <%= asset.check_box :_destroy %></p>
Or it's even easier if you use the simple_form gem, for example if you have a boolean attribute in your model checkboxes are the default:
<%= f.input :agreement %>
Or you can force checkboxes like this:
<%= f.foobar, :as => :check_boxes %>
Consider using bootstrap-rails to incorporate to bootstrap css and javascript libraries into you application. There are several flavors of rails bootstrap but I personally use this one because it is written in SASS (more commonly used with rails than LESS).
You have some issues with how you approaching this as its seems you have three options and only one of which I'd assume should be selected (for which I recommend using a select tag) and you are using buttons not checkboxes... but to integrate checkboxes into you application, rails indeed offers a methods, an example in a form_for is as follows:
- form_for #something_with_a_postion do |something|
= something.label 'Left'
= something.check_box 'position', 'left', {class: 'whatever_classes_for_bootstrap_needed'}
= something.label 'Middle'
= something.check_box 'position', 'middle', {class: 'whatever_classes_for_bootstrap_needed'}
= something.label 'Right'
= something.check_box 'position', 'right', {class: 'whatever_classes_for_bootstrap_needed'}
You can find more on form_for and check_box here.
I also refer you to this question. As well, here is a RailsCast pertaining to checkboxes.
Related
So I have a form that is working when I don't use Materialize to stylize it. It submits and the info is saved into the database, but the problem arises when I use materialize to stylize the button. It randomly saves the data into the database when it is using the materialize styling(e.g. like 7 times in a row and then it stops and will randomly start working again). Is there a known error with this gem or am I missing something?
gem 'materialize-sass'
View
<%= form_for(#user) do |f| %>
<div class="action btn waves-effect waves-light actions">
<%= f.submit "Create my account" %>
</div>
<% end %>
Check your styling. In your example button will always work when you click on button caption only.
<button class="btn waves-effect waves-light" type="submit" name="action">Submit
<i class="material-icons right">send</i>
I’m building a form now with Rails & Simple_form with validations on the model. In the form I have several collections of radio buttons.
For each of the radio buttons I’m hiding the actual button and adding a font awesome icon. I’ve tried this with f.collection_radio_buttons and by just replacing the simple_form f.input tag with the plain HTML it would otherwise generate. However, after form validation I can only get the values to return and the error messages to display when I stick to this format:
<%= f.input field_value, label: false, as: :radio_buttons, collection: [1,2,3,4,5] %>
It seems that almost any changes I make to the default radio button causes it to be excluded from the form validation flow. Values are being sent correctly though.
Basically, the form works, values are being retained even after validation failure. What’s going wrong is the error messages are not being displayed and the values aren’t placed back in their fields, so they’re not visible
Basically what I want is a fontawesome icon instead of a radio button, I get the feeling a lot of people have done this before but I can't seem to find many resources online regarding this.
Below is a rough example of the HTML/ERB I was experimenting with. With this the form works, icons are displayed and all seems pretty great until the form is re-rendered after validation failure. Then the values are loaded back into the field, but not displayed for these fields. Any validation errors are also not displayed.
<div class="form-group radio_buttons required rating_<%= field_value.to_s %>">
<input type="hidden" name="rating[<%= field_value.to_s %>]" value="">
<% (1..5).to_a.each do |number| %>
<span class="radio">
<label for="rating_<%= field_value.to_s %>_<%= number %>" id="<%= number %>" data-target=".rating_<%= field_value.to_s %>">
<input class="radio_buttons optional" type="radio" value=<%= number %> name="rating[<%= field_value.to_s %>]" id="rating_<%= field_value.to_s %>_<%= number %>">
<i class="fa fa-star fa-2x"></i>
</label>
</span>
<% end %>
</div>
As shown in the image, my buttons are not inline with eachother and the cancel button is far bigger than it should be.
This is the code I'm currently using:
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<%= button_tag t('btn.save'), class: 'btn btn-brand-color', type: 'submit' %>
<%= link_to t('btn.cancel'), :back, class: 'btn btn-default' %>
</div>
</div>
What I want is to have the two buttons next to each other preferably by using already existing bootstrap classes.
As per comment - you have a link (a) declaration which is set to 100%.
tip -- might be easiest to use the browser inspector to find out which class and in which css file are overriding your intention.
For others in the future: If there is any doubt about whether a class is vanilla bootstrap, or something you've inadvertently overriding a class you hadn't intended to, you can view bootstrap's native behavior by inspecting the html row or element, right clicking - then click on Copy as HTML
In this questions example that output would be
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<button name="button" type="submit" class="btn btn-brand-color"><span class="translation_missing" title="translation missing: en.btn.save">Save</span></button>
<a class="btn btn-default" href="javascript:history.back()"><span class="translation_missing" title="translation missing: en.btn.cancel">Cancel</span></a>
</div>
</div>
Paste that into http://www.bootply.com/new and click Run -- it's a good indicator of style interference (also Bootply lets you change versions of bootstrap to match your own.
I never used ruby-on-rails before. But if you get this, maybe you should create a new CSS class and include display: inline-block on the button & make sure the button with are not set width: 100%.
In Rails is it possible to achieve an HTML output like this using button_to?
<button type="submit" value="1" name="id">Type 1</button>
<button type="submit" value="2" name="id">Type 2</button>
What are the reasons for using button_to over manually entering the HTML in my form?
...
EDIT:
Perhaps I should rephrase this? Seems the better way would be to add some hidden fields to the button_to form. It doesn't seem like I can do this.
So what is the correct Rails solution to pass extra hidden fields to a dynamic form generated via a button_to? Or should I just build a form manually?
e.g. I have:
button_to "Download", items_path(:release_id => release), :remote => true
and I want to pass an extra parameter in the form POST format => "download"
Seems my answer was to use the form_tag helper
I have a typical CRUD app, I would like to add a link next to the f.submit that allows you to go back to the index without saving changes. I thought it would be as simple as just making a link to the index, but it's saving changes anyway.
<%= button_to 'Close Without Saving', users_path %>
<%= f.submit %>
What's the rails way of handling this?
From the fine manual:
[button_to] Generates a form containing a single button that submits to the URL created by the set of options.
So using button_to inside a form will attempt to create a nested form but HTML forms don't nest. The result will be an HTML structure something like this:
<form>
<form><!-- from button_to -->
<input type="submit">
</form>
<input type="submit"><!-- from f.submit -->
</form>
But the browser will ignore the inner <form> and assume you meant this:
<form>
<input type="submit"><!-- from button_to -->
<input type="submit"><!-- from f.submit -->
</form>
Then pressing either <input type="submit"> will submit the outer form.
You can either create another submit button in the outer form and the controller can check which button was pressed or you can use link_to and style the link to match your submit button (or leave it styled like a link depending on your preference).
<button type="button" onClick="location.href='<%= users_path %>'">Close Without Saving</button>
<%= f.submit %>
This also worked... went back to basics and used good old fashioned HTML.