Rails application experiencing issues with Materialize CSS checkbox functionality

I'm having trouble getting checkboxes to display on a form for users to choose workshops. I am using the Materialize CSS gem with Rails.

Here is my form:

<div class="row">
  <% workshops = Workshop.all.order("date") %>
  <% workshops.each do |workshop| %>
    <div class=" col m4 s6">
      <%= f.label "#{workshop.name} \n\r #{workshop.date}", for:"workshop_id", id:"workshop_id" %>
      <%= f.check_box :workshop_id, id:"workshop_id" %>
    </div>
  <% end %>  
  <div class="actions col m6 s12">
    <br>
    <br>
    <br>
    <%= f.submit "Save", class:"btn green"%> 
  </div>
</div>

I've tried adding and removing the id and for attributes within the input and label tags, but I can't seem to get the checkboxes to show up. Am I overlooking something?

EDIT 1

The CSS provided by Materialize CSS is as follows:

[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
    position: absolute;
    left: -9999px;
    visibility: hidden;
}

Answer №1

The solution was surprisingly simple - just switch the order of the <input> and the <label>

Instead of this:

<%= f.label "#{workshop.name} \n\r #{workshop.date}", for:"workshop_id", id:"workshop_id" %>`
<%= f.check_box :workshop_id, id:"workshop_id" %>`

Do it like this:

<%= f.check_box :workshop_id, id:"workshop_id" %>
<%= f.label "#{workshop.name} \n\r #{workshop.date}", for:"workshop_id", id:"workshop_id" %>

Issue resolved!

Answer №2

After some investigation, I discovered that the issue was caused by placing a checkbox within a div element with the class "input-field."

It is essential to remember NOT to nest a checkbox input field inside

<div class="input-field col s12 m3"></div>

Answer №3

Encountering a similar issue with a checkbox and materialize css. Here's the solution that ended up working for me.

<%= f.check_box :online %>
<%= f.label 'online', id:'online' %>

Answer №4

Here is a solution that has worked well for me:

<div class="input-field col s3">
  <label>
    <%= form.check_box :main, id:"main" %>
    <span>Is this the main option?</span>
  </label>
</div>

Answer №5

MaterializeCSSS update note for the current version. Previously, before v1.0 of MaterializeCSS (or pre-v0.100), a simple HAML syntax (ERB equivalent) was all that was needed:

= f.collection_check_boxes :mymodel_ids, Mymodel.all, :id, :description

This would create a nicely formatted set of collection checkboxes with just one line. However, starting from v1.0.0 (or 0.100.x), achieving the same result requires a bit more:

= f.collection_check_boxes(:mymodel_ids, Mymodel.all, :id, :description) do |builder|
    %div
        = builder.label do
            = builder.check_box
            %span
                = builder.text

A similar change is needed for single checkboxes as well:

= address_fields.check_box :_destroy
= address_fields.label :_destroy, "#{t'users.edit.destroy'}"

which now becomes:

= address_fields.label :_destroy do
    = address_fields.check_box :_destroy
    %span
        = "#{t'users.edit.destroy'}"

If you're facing issues with checkboxes after updating to V1.0, hopefully, this can help.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing only certain portions of my CSS to be applied?

I've been struggling to get rid of the gray border around the SIGN UP button in the tbody section. I've tried applying classes (along with the ID) and using pseudo classes like :4th-child {border:none}, but nothing seems to work. The only solutio ...

Border only at the bottom of the outline

I need help creating a bottom outline border when the cursor hovers over an image. I prefer to use this inner border style to avoid any layout issues with a traditional border-bottom. Below is my current code, which includes outline margins: .img-lightbox ...

The rounding of my image is uneven across all sides

I'm attempting to give my image rounded borders using border-radius, but I'm unsure if the overflow property is affecting the image. Image 1 shows my current image, while Image 2 depicts what I am trying to achieve. I am utilizing React, HTML, no ...

Make sure the div is always positioned above everything, including any built-in pop-up windows

When working with two forms, one for user input and the other as a pop-up window to display results, users sometimes close the pop-up window prematurely if they think there is a network issue causing a delay in data execution. To prevent this, I am consi ...

Using CSS grid for optimal responsive design

Today I delved into the world of CSS grid and instantly saw its potential in creating stunning layouts. However, one aspect that has me perplexed is how to adapt the grid for mobile devices. Below is an example that functions perfectly on a desktop screen ...

Choose an image to be displayed at either full width or full height, depending on which dimension is reached first

I have a query regarding resizing an image within a div to either 100% width or 100% height of the containing div. Despite setting max-height and max-width to 100% as recommended here, I still encounter overflow issues without wanting to crop the image usi ...

Arrange the next and previous buttons on the top right corner of the Bootstrap Carousel, ensuring they are situated closely together

I am currently utilizing the Bootstrap 4 carousel. My goal is to adjust the position of the next and previous buttons to be in the top right corner, close to each other. I have been able to achieve this, but I suspect that there may be an error in my CSS c ...

Is it possible for me to create a menu using the .row and .col classes from Bootstrap?

I attempted to create a menu using Bootstrap's cols. Something similar to this: https://i.stack.imgur.com/55xst.png However, I faced numerous challenges when trying to implement it into Wordpress and realized that it may not be the best approach... ...

What might be causing my CSS selector to be considered as invalid?

Looking to utilize the database ID below as a selector 5b4bb7d2685cfb094b1d46c3 Here is the snippet: document.querySelector('#5b4bb7d2685cfb094b1d46c3') <button id="5b4bb7d2685cfb094b1d46c3"> However, when trying the selector, an erro ...

Exploring the integration of JavaScript format with AJAX in Rails 4

Currently, I am delving into the world of Rails and working on a page that displays team information. This information will be updated when a team icon is clicked, triggering an ajax call to the controller to populate certain tabs. I came across some insi ...

The spacing in a nested flexbox form gets distorted due to CSS3 styling

Working on creating a flexbox form where labels and inputs are on the same line. Have successfully achieved the desired layout using flex properties like flex-basis. However, encountered an issue when trying to nest the flexbox within an element with a fi ...

Ways to modify font color in JavaScript "type"

Recently, I came across a fascinating technique where by simply refreshing the page, the text changes sentences. I managed to implement the code successfully, however, I am having trouble changing the color, size, and alignment of the text. <script type ...

Combining different HTML table borders

Here is some example code: <!DOCTYPE html> <html> <body> <h4>Creating a table with nested tables:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td> </td> < ...

Is it possible to create a collapse and expand animation that does not involve transitioning the `height

After extensively researching, I have come across numerous articles advocating for the use of transform and opacity for achieving smooth CSS transitions. An example can be found here: The prevailing notion always revolves around: ...the optimization ...

What is the best approach to repurpose a component when small adjustments are needed?

Can a customized slider component be created in React that can be reused with slight variations? For example, having the second one include a 13% field. View image description here ...

Attempting to create a dynamic dropdown menu with animated effects triggered by a key press

I've been attempting to construct a menu that initially appears as a small icon in the corner. Upon pressing a key (currently set to click), the checkbox is activated, initiating the animation. Most of the menu and animation are functional at this po ...

CSS hover effect: altering background colors of both parent and child elements simultaneously

HTML: <div class="container"> <div class="parent">one <div class="child">two</div> </div> </div> CSS: .parent { background: red; height: 200px; width: 200px; } .child { back ...

Partial functionality noticed in Bootstrap navbar CSS

I seem to be encountering a peculiar issue with Bootstrap 3.3.6 CSS, where it is only partially functioning. Despite ensuring the proper structure of the site (correct classes in the right places, etc.), it appears that some of the CSS styles are missing. ...

What is the best way to add shadow effects to a DIV using CSS?

Is there a way to add shadows within an element using CSS? I attempted the following method but it did not work: #element { shadow: 10px black; } ...

What could be causing my iframe to not adjust its size according to its content?

My attempt at resizing a cross-site iframe is not working as expected, despite following the guidance provided here. The iframe on my page seems to remain unaltered in size, and I can't figure out what mistake I might be making. The current location ...