我正在使用 Rails 4 的 Devise gem,并尝试向我的/registrations/edit.html.erb View 添加一个单选按钮和一个下拉菜单。接下来,我正在使用 Material Design,它似乎也禁用了这些功能
如果我禁用 Material Design(我能够为我的 Devise 用户更新这些新字段),它就可以正常工作,但是当我再次打开它时(@import "materialize";
in application.scss
)它们都不可点击,但表单的其余部分确实可以工作。
这是我的代码。
应用程序.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
。
这是我的浏览器中的样子(名称和国家/地区也重叠,性别/性别和国家/地区选择根本没有反应):
谁能帮帮我吗?
最佳答案
部分问题是您实际上并不希望单选按钮或选择字段上有类 input-field
。来自 documentation :
"Text fields allow user input. The border should light up simply and clearly indicating which field the user is currently editing. You must have a .input-field div wrapping your input and label. This helps our jQuery animate the label. This is only used in our Input and Textarea form elements."
对于选择功能,文档说将其包装在 .input-field
中(这与上面的引用相矛盾,哎呀!)。没有包装类,它似乎对我有用。您需要确保做的事情是:
$(文档).ready(function() {
$('选择').material_select();
});
这在选择字段文档部分的最底部提到。希望有帮助!
关于ruby-on-rails-4 - 我的表单输入字段不适用于 Materializecss,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34103832/