CODEWITHSUNDEEP
ruby-on-railsrubysimple-form
Katie H
Katie H

Reputation: 2293

Styling checkboxes rails

I'm trying to style checkboxes in my rails app.

<div class="form-group">
     <%= f.label :tag_list %>
   <p>Science</p>
  <%= f.check_box :tag_list, { :multiple => true }, 'science', nil %>

  <p>Math</p>
  <%= f.check_box :tag_list, { :multiple => true }, 'math', nil %>

  </div>

In my application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery-ui/button
//= require jquery-ui/datepicker
//= require jquery-ui/slider
//= require jquery-ui/spinner
//= require jquery-ui/tooltip
//= require jquery-ui/effect
//= require flatuipro
//= require flat-ui.min
//= require sweet-alert-confirm
//= require turbolinks
//= require_tree .

$(':checkbox').radiocheck();

I'm using something called flat-ui and am trying to apply the styles they provide for check boxes. How do I do this?

Upvotes: 1

Views: 903

Answers (2)

Jon Egeland
Jon Egeland

Reputation: 12613

Looking at the documentation, it seems like the class checkbox needs to be given to the label, and the input needs to be inside the label. Your markup would then look something like this:

<div class="form-group">
  <%= f.label :tag_list, class: 'checkbox' do %>
    <p>Science</p>
    <%= f.check_box :tag_list, { multiple: true }, 'science', nil %>
  <% end %>
</div>

Then, make sure you are calling $(':checkbox').radiocheck(); in your JavaScript, and that you have included the Flat-UI js file.

Update from chat:

Make sure that each input has its own label:

<div class="form-group">
  <%= f.label :tag_list, class: 'checkbox' do %>
    <p>Science</p>
    <%= f.check_box :tag_list, { multiple: true }, 'science', nil %>
  <% end %>

  <%= f.label :tag_list, class: 'checkbox' do %>
    <p>Math</p>
    <%= f.check_box :tag_list, { multiple: true }, 'math', nil %>
  <% end %>

  ...
</div>

Also make sure that the JavaScript isn't called until the page has finished loading:

// application.js
$(function() {
  $(':checkbox').radiocheck();
});

Upvotes: 1

Sharvy Ahmed
Sharvy Ahmed

Reputation: 7405

You need the radiocheck js file:

You can download the js file: radiocheck.js

Include radiocheck.js file in app/assets/javascripts folder.

Add this line in your application.js and the file will look like this:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require flat-ui.min
//= require radiocheck
//= require_tree .

$(function(){
    $(':checkbox').radiocheck();
});

Upvotes: 1

Related Questions