Мои поля ввода формы не работают с Materializecss

Question

Я использую драгоценный камень Devise для рельсов 4, и я пытаюсь добавить переключатель и раскрывающийся список в мое /registrations/edit.html.erb представление. Рядом с этим я использую Material Design, который, похоже, отключает эти функции, а также

Он отлично работает, если я отключу конструкцию материалов (я могу обновить эти новые поля для моего пользователя Devise), но когда я поворачиваю он снова (@import "materialize"; в application.scss) они оба не доступны для кликов, но остальная часть формы работает.

Итак, вот мой код.

application.scss:

//= require morris 

@import "materialize"; 
@import "toastr"; 

/registrations/edit.html.erb:

<div class="row"> 
<div class="col s12 m6 offset-m3 center"> 
<h5>Edit <%= resource_name.to_s.humanize %></h5> 
    <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %> 
    <%= render partial: "shared/devisemes" %> 

    <div class="input-field"> 
    <%= f.radio_button :sex, 1 %> <%= f.label :sex, "Female" %> 
    <%= f.radio_button :sex, 2 %> <%= f.label :sex, "Male" %> 
    </div> 

    <br/> 
    <div class="input-field"> 
    <%= f.label :country_code, "Default Config" %> 
    <%= f.country_select :country_code %> 
    </div> 

    <div class="input-field"> 
    <%= f.text_field :name, autofocus: true, :class => "validate", :placeholder => "Name" %> 
    </div> 

    <div class="input-field"> 
    <%= f.email_field :email, :class => "validate", :placeholder => "Email" %> 
    </div> 

    <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %> 
     <div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div> 
    <% end %> 

    <div class="input-field"> 
    <%= f.password_field :password, :id => "password", :placeholder => "New password (leave blank if you don't want to change it)", :class => "validate", autocomplete: "off" %> 
    </div> 

    <div class="input-field"> 
    <%= f.password_field :password_confirmation, :id => "password_confirmation", :placeholder => "Confirm password", :class => "validate", autocomplete: "off" %> 
    </div> 

    <div class="input-field"> 
    <%= f.password_field :current_password, :id => "current_password", :placeholder => "Type current password to confirm your change", :class => "validate", autocomplete: "off" %> 
    </div> 

    <button class="btn waves-effect waves-light" type="submit" name="action">Update</button> 
    <%= link_to "Back", :back, :class => "btn waves-effect waves-light" %> 
<% end %> 

<br/> 
<p>Unhappy?</p> 
<%= link_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete, :class => "btn waves-effect waves-light" %> 

Элементы, которые не работают в приведенном выше коде :sex и :country_code.

А вот как это выглядит в браузере (название и страна пересекаться, а также и пол/пол и выбора страны не реагируют на все):

Может кто-нибудь помочь мне?

Answer 1

Часть проблемы заключается в том, что вы действительно не хотите, чтобы класс input-field на переключателях или полях. Из documentation:...

«Текстовые поля позволяют ввод данных пользователя Граница должна загореться просто и ясно указует на какое поле пользователя в настоящее время редактирования Вы должны иметь .Входное поле ДИВ оборачивать свой вход и этикетку Это помогает нашему jQuery анимировать ярлык, который используется только в наших элементах ввода и Textarea ».

Для выбора функциональности в документации говорится об упаковке ее в .input-field (что противоречит цитированной выше цитате!). Кажется, это работает для меня БЕЗ класса обертки. Вещь, которую вы должны убедиться, что нужно сделать, это:

$(document).ready(function() { $('select').material_select(); });

Это упоминается в самом низу секции поля документации выберите. Надеюсь, это поможет!