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 https://www.youtube.com/watch?v=814gCeOpM4o 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" } %>
<br>
<%= f.label :title %>
<%= f.text_field :title %>
<br>
<br>
<div class="row">
<div class="input-field col s12">
<%= f.label :text %>
<%= f.text_area :text, class: "materialize-textarea" %>
</div>
</div>
<br>
<br>
<%= f.label :creator %>
<%= f.text_field :creator %><br>
<%= f.submit %>
<% end %>
</div>
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>
</select>
source to share
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 http://materializecss.com/forms.html )
<%= f.collection_select :category_id, Category.all, :id, :name, { prompt: "Choose a category" }, class: "browser-default" %>
source to share
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 ->
$('select').material_select
return
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
gem for the function to $document.ready
work.
Remember to restart the rails server after adding jquery.turbolinks
source to share
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')
following:
$(document).on('turbolinks:load', function() {
$('select').material_select();
})
source to share