Can't add collection_select when using materialized rails 4.2

I have created a category model with a transition from category_id (basically everything Mackenzie Child does in his video from 25 minutes) and I want it to appear on my form.

This doesn't work, mine collection_select

will not display on screen, but it will display in source code, and when I remove the 'css-framework, it materializes.

My code:

<div class="container"> 
<div class="row">
    <%= form_for @post do |f| %>
        <%= f.collection_select :category_id, Category.all, :id, :name, { prompt: "Choose a category" } %>
        <%= f.label :title %>
        <%= f.text_field :title %>
        <div class="row">
            <div class="input-field col s12">
                <%= f.label :text %>
                <%= f.text_area :text, class: "materialize-textarea" %>

        <%= f.label :creator %>
        <%= f.text_field :creator %><br>
        <%= f.submit %>
    <% end %>   


As it appears in the source code:

    <select name="post[category_id]" id="post_category_id"><option value="">Choose a category</option>
        <option value="1">Marketing</option>
        <option value="2">Technology</option>
        <option value="3">Programming</option>
        <option value="4">Health and Fitness</option>



source to share

3 answers

I went through the materialization documentation and I found out that I just need to add the default browser class to my collection-select (docs link )

    <%= f.collection_select :category_id, Category.all, :id, :name, { prompt: "Choose a category" }, class: "browser-default" %> 




If you want your select boxes to display the Materialize CSS way instead of the standard browser, then remove the class browser-default

and initialize the select box with this code in the appropriate file .coffee


$(document).ready ->


find app/assets/javascripts/

for the file where it will be placed.

Also, if you are using turbo science with jQuery, you need to add a jquery.turbolinks

for the function to $document.ready


Remember to restart the rails server after adding jquery.turbolinks



Based on Toby 1 Kenobi's answer and this solution of mine using Rails 5 should have changed $(document).ready

to the $(document).on('turbolinks:load')


$(document).on('turbolinks:load', function() {




All Articles