I'm using semantic-ui-sass and I'm not able to use the check box in rails.
That's working:
<div>
<%= f.label :remember_me, "Angemeldet bleiben?" %>
<%= f.check_box :remember_me %>
</div>
This is working as well:
<div class="ui checkbox">
<input type="checkbox" name="example">
<label>Make my profile visible</label>
</div>
But this is NOT:
<div class="ui checkbox">
<%= f.label :remember_me, "Angemeldet bleiben?" %>
<%= f.check_box :remember_me %>
</div>
I found a solution; all I have to do is to change the order of
f.check_box and f.label
This one is working:
<div class="ui checkbox">
<%= f.check_box :remember_me %>
<%= f.label :remember_me, "Angemeldet bleiben?" %>
</div>
Rails form automaticaly creates his own divs and classes so you can't mix both. You can do this though:
<%= f.label :remember_me, "Angemeldet bleiben?" %>
<%= f.check_box :remember_me, :class => "ui checkbox" %>
Sorry mistyped
Related
I have a application controller like this :
class ApplicationController < ActionController::Base
before_action :configure_permitted_parameters, if: :devise_controller?
protected
def configure_permitted_parameters
devise_parameter_sanitizer.permit(:sign_up, keys: [:first_name, :last_name, :description, :city_id, :golf_level])
end
end
and a form sign up with device like this :
<h2 class='container'>Inscription</h2>
<div class="tab-pane show active" id="component-1-1" role="tabpanel" aria-labelledby="component-1-1">
<div class="component-example">
<div class='container'>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<div class='row'>
<div class="col-md-6">
<%= render "devise/shared/error_messages", resource: resource %>
<div class='field form-group'>
<%= f.label 'Prénom' %><br>
<%= f.text_field :first_name, class: 'form-control' %>
</div>
<div class='field form-group'>
<%= f.label 'Nom' %><br>
<%= f.text_field :last_name, class: 'form-control' %>
</div>
<div class="field form-group">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, autocomplete: "email", class: 'form-control' %>
</div>
<div class='field form-group'>
<%= f.label 'Niveau' %>
<%= select_tag(:golf_level, options_for_select([['débutant', 'débutant'], ['intermediaire', 'intermediaire'], ['confirmer', 'confirmer']])) %>
</div>
</div>
<div class="col-md-6">
<div class="field form-group">
<%= f.label 'Mot de passe' %>
<% if #minimum_password_length %>
<em>(<%= #minimum_password_length %> characters minimum)</em>
<% end %><br />
<%= f.password_field :password, autocomplete: "new-password", class: 'form-control' %>
</div>
<div class="field form-group">
<%= f.label 'Confirmer mot de passe' %><br />
<%= f.password_field :password_confirmation, autocomplete: "new-password", class: 'form-control' %>
</div>
<div class='field form-group'>
<%= f.label 'Ville' %>
<%= select_tag(:city_id, options_for_select( City.all.collect { |city| [city.name, city.id] }, {target_blank: true} )) %>
</div>
<div class='field form-group'>
<%= f.label 'Description'%>
<%= f.text_area :description, size: "60x5", class: 'form-control'%>
</div>
</div>
<div class="actions">
<%= f.submit "Inscription", class: 'btn btn-primary' %>
</div>
<% end %>
<button class='btn btn-primary' style="margin-left:20px;"><%= render "devise/shared/links" %></button>
</div>
</div>
</div>
</div>
My problem is maybe stupid but : When i create a User with this form the selects tags golf_level and city_id are not save in db but all other yes. In device doc I don't find special way for select form.
Ok, your parameters are passed, but not within proper namespace. Instead of select_tag you should use f.select method:
<%= f.select(:city_id, options_for_select(City.pluck(:name, :id), target_blank: true )) %>
And likewise for the second of your params.
I am using Devise for authentication, but I want to use my own form input.
I have checked that Devise's sign_in works. I was able to login with this on localhost:3000/users/sign_in :
<h2>Log in</h2>
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<div class="field">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true %>
</div>
<div class="field">
<%= f.label :password %><br />
<%= f.password_field :password, autocomplete: "off" %>
</div>
<% if devise_mapping.rememberable? -%>
<div class="field">
<%= f.check_box :remember_me %>
<%= f.label :remember_me %>
</div>
<% end -%>
<div class="actions">
<%= f.submit "Log in" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
I created on index page this form, but I could not get it to work (I was not able to login with the code below):
<form class="form-inline">
<div class="form-group">
<input type="email" class="form-control" id="user_email" placeholder="email?">
</div>
<div class="form-group">
<label for="exampleInputPassword2">/</label>
<input type="text" class="form-control" id="user_password" placeholder="password?">
</div>
<button type="submit" class="btn btn-primary">Sign In</button>
</form>
I read formhelper on rubyonrails.org website and bootstrap's css page but it still did not clear up how to use bootstrap's form.
Here are some of the things I don't understand:
The following code <input type="email" class="form-control" id="user_email" placeholder="email?">, what should I put for type= and id=? How can I tell bootstrap's form to submit a post request for my session? I can somewhat read and interpret Devise' form: <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %> by looking at it: resource is :user, the url is being sent to user's session. I could not find information online about bootstrap's form. How can I integrate my own custom form using bootstrap with Devise' session?
Your problem has not really something to do with Bootstrap at first. I would try to get the form working, before you add bootstrap.
The from could be created like this:
<%= form_for(:user, :url => session_path(:user)) do |f| %>
<%= f.text_field :email %>
<%= f.password_field :password %>
<%= f.check_box :remember_me %>
<%= f.label :remember_me %>
<%= f.submit 'Sign in' %>
<%= link_to "Forgot your password?", new_password_path(:user) %>
<% end %>
Now you add some bootstrap flavor to this form:
<%= form_for(:user, :url => session_path(:user)) do |f| %>
<div class="form-group">
<%= f.text_field :email, placeholder: 'example#example.com' %>
</div>
<div class="form-group">
<%= f.password_field :password %>
<%= f.check_box :remember_me %>
<%= f.label :remember_me %>
</div>
<%= f.submit 'Sign in', class: 'btn btn-primary' %>
<%# link_to "Forgot your password?", new_password_path(:user) %>
<% end %>
Most of the information I is from this page of the devise wiki.
So I implemented Materialize css with my Rails app. I already had Bootstrap installed.
Basically I want to have Materialize form components within the app. I have struggles figuring out how to actually create a materialize form in Rails that submits details from the form. I see that components are showing.
How can I implement materialize form components within this form?
In my Devise, edit form, the form looks like this:
<div class="panel-body">
<%= form_for resource, as: resource_name, url: registration_path(resource_name), layout: :horizontal do |f| %>
<!-- = devise_error_messages!
-->
<div><%= f.label :first_name %><br />
<%= f.text_field :first_name, autofocus: true %></div>
<div><%= f.label :last_name %><br />
<%= f.text_field :last_name, autofocus: true %></div>
<div><%= f.label :gender %><br />
<%= f.text_field :gender, autofocus: true %></div>
<div><%= f.label :age_range %><br />
<%= f.text_field :age_range, autofocus: true %></div>
<%= f.email_field :email, autofocus: true %>
<% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
<p>
Currently waiting confirmation for:
<%= resource.unconfirmed_email %>
</p>
<% end %>
<%= f.password_field :current_password %>
<%= f.password_field :password, autocomplete: "off" %>
<%= f.password_field :password_confirmation, autocomplete: "off" %>
<%= f.submit "Update" %>
<% end %>
</div>
</div>
You can use MaterilizeCSS Input field classes for your input fields like this.
<div class="input-field col s6">
<%= f.label :first_name %><br />
<%= f.text_field :first_name, autofocus: true %>
</div>
<div class="input-field col s6">
<%= f.label :last_name %><br />
<%= f.text_field :last_name, autofocus: true %>
</div>
Like this you can achieve MaterializeCSS style.
Materialize-CSS Component forms are text inputs, more specifically input fields from the docs:
https://materializecss.com/text-inputs.html
Example implementation:
<div class="container">
<div class="row center sign-up-form">
<div class="col s12 m12 l12">
<div class="card-panel">
<h3 class="header">Sign up!</h3>
<div class="row">
<%= form_for(#student, html: {class: "col s12"}) do |f| %>
<div class="row">
<div class="input-field col s12">
<%= f.text_field :name, placeholder: "Enter your full name", autofocus: true %>
<%= f.label :name %>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<%= f.email_field :email, placeholder: "Enter your email address" %>
<%= f.label :email %>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<%= f.submit "Submit", class: "btn orange waves-effect waves-light right" %>
</div>
</div>
<% end %>
</div>
</div>
</div>
</div>
</div>
Add this to your gemfile
gem 'materialize-form'
and follow these instructions.
Rails project with materialize framework, what I am trying to do is rendering a form in a modal.
Therefore I have in the application.html.erb:
<!-- Modal Structure -->
<div id="signupmodal" class="modal">
<div class="modal-content">
<%= render template: "users/new" %>
</div>
</div>
The rendered template looks like this:
<%= form_for(#user) do |f| %>
<%= render 'shared/error_messages' %>
<div class="row">
<div class="row col s6">
<%= f.label :name %>
<%= f.text_field :name, class: 'form-control' %>
<%= f.label :email %>
<%= f.email_field :email, class: 'form-control' %>
<%= f.label :password %>
<%= f.password_field :password, class: 'form-control' %>
<%= f.label :password_confirmation, "Confirmation" %>
<%= f.password_field :password_confirmation, class: 'form-control' %>
</div>
</div>
<%= f.submit 'Create my account', class: "btn waves-effect waves-light orange darker-1" %>
<% end %>
But because the rendered template has its own controller, I get the
First argument in form cannot contain nil or be empty
error, because it doesn't know the #user in the application controller. What is the best way to avoid this error?
I have two tables, works and artists. Every artist has multiple works. Is it possible to list those artists in a dropdown menu when creating a new work.
This is the way I solve it right now:
<div class="field">
<%= f.label :title %><br />
<%= f.text_field :title %>
</div>
<div class="field">
<%= f.label :photo %><br />
<%= f.file_field :photo %>
</div>
<div class="field">
<%= f.label :exhibition_id %><br />
<%= f.number_field :exhibition_id %>
</div>
<div class="field">
<%= f.label :artist_id %><br />
<%= f.number_field :artist_id %>
</div>
<div class="actions">
<%= f.submit %>
</div>
http://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-collection_select
The example is exactly what you're looking for.
collection_select(#work, :artist_id, Artist.all, :id, :name)