How to use material design text fields in rails - ruby-on-rails

Question

I am looking to use material design text field in rails in order to have the field's placeholder shifting to the top when the user start typing.
I do get the field to show up properly in rails straight from the example, but I DO NOT KNOW HOW TO ADAPT IT TO RAILS simple_form component.
application.html.erb
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
in my form.html.erb
<%= f.input :title, label: false %>
<%= f.collection_select(:color, Color.all, :id, :name) %>
It shoudl look like this:
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3">
<label class="mdl-textfield__label" for="sample3">Text...</label>
</div>
</form>

Answer 1

I haven't use simple_form before, but looking at the docs, something like this should work.
<%= simple_for_form #user do |f| %>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<%= f.input_field :username, input_html: { class: 'mdl-textfield__input'} %>
<%= f.label :username, input_html: { class: 'mdl-textfield__label'} %>
</div>
<% end %>
If you want to create the whole div with just f.input_field you could look into custom inputs
You might be able to do something like this inside of a custom input
template.content_tag(:div class: 'mdl-textfield mdl-js-textfield mdl-textfield--floating-label') do
# text_field_input_code
# label_input_code
end

Answer 2

When I get you right, you are looking for "Float Labels"
This can normally be achieved with a mixture of JS and CSS, like described here.
In my own Rails application, where I also use simple_form, I have used the following code to achieve this pattern:
JS (jQuery):
// FLOATING LABLES:
$(document).on('turbolinks:load', function () {
$('.form-group.string').addClass('float-labels'); // removes all labels from the form (removing with js due to old browsers & disabled JS)
$('.form-group.string input.form-control').each( function (index, value) {
addRemoveFloatLable($(this)); // bring back labels for already filled forms (edit).
});
});
$(document).on('input keyup', '.form-group.string input', function () {
if( $(this).val().length <= 1 ) { // change only needed in case first char gets added (or latest gets removed)
addRemoveFloatLable($(this));
}
});
function addRemoveFloatLable($element) {
if ( $element.val() == '' ) { // input field is empty.
$element.parents('.form-group').removeClass('show-label');
} else {
$element.parents('.form-group').addClass('show-label');
}
}
CSS:
.form-group.string.float-labels {
label {
opacity: 0;
}
}
.form-group.string.float-labels.show-label {
label {
opacity: 1;
-webkit-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
}

Answer 3

I would like to recommend this tutorial, I have followed it and it works fine for me... hope this helps,
https://www.webascender.com/blog/tutorial-using-materialize-ruby-rails-simple-form/
Also have a look at
how to style simple_form with material design or custom css