I'm new to Ruby and programming in general. I'm creating this log in page using simple form but the Create account button is to close to the confirm password form I don't know how to enter a break between these two.
Thank you!
<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name), html: { class: 'form-horizontal'}) do |f| %>
<%= devise_error_messages! %>
<%= f.input :email, :label => 'Correo Electronico' %>
<%= f.input :password, :label => 'Contraseña' %>
<%= f.input :password_confirmation, :label => 'Confirmar Contraseña' %>
<div>
<%= f.submit "Crear cuenta", class: "btn btn-primary" %>
</div>
<% end %>
You should use a HTML class/id and put these rules in a CSS file. But there is 2 ways:
The quick & diry way:
<div style="margin-top: 15px;">
<%= f.submit "Crear cuenta", class: "btn btn-primary" %>
</div>
The proper way:
# app/assets/stylesheets/application.css.scss (or extension can be .sass)
body div.form_action_buttons {
margin-top: 15px;
}
# your view
<div class='form_action_buttons'>
<%= f.submit "Crear cuenta", class: "btn btn-primary" %>
</div>
Related
So I'm following a tutorial for RoR but I can't seem to get the alignment right.If I copy and paste the code for the tutorial, it will look like
this
Here is the code:
<div class="row">
<div class="col-md-6 col-md-offset-3">
<%= form_for(#user) do |f| %>
<%= f.label :name %>
<%= f.text_field :name %>
<%= f.label :email %>
<%= f.email_field :email %>
<%= f.label :password %>
<%= f.password_field :password %>
<%= f.label :password_confirmation, "Confirmation" %>
<%= f.password_field :password_confirmation %>
<%= f.submit "Create my account", class: "btn btn-primary" %>
<% end %>
But if I put col-md-1, then it sort of works, looking like this
Is it possible to still use col-md-6 but have it properly aligned like the second photo? I don't know what else to change other than the numbers.
I am not able to test this right now but you may be able to change your first line of your form to:
<%= form_for #user, :html => {:class => "form-horizontal"} do |f| %>
This should add the html and css need to make the form horizontal:
<form class="form-horizontal">
Some what like this example: https://jsfiddle.net/obp9x1yr/7/
This might be a good post to read for more information: Rails Bootstrap how to format form_for (width grid collapses)
Pretty new to Ruby, but I'm working on a website for editing information on bus routes for a larger system. The DB has Route separate from it's list of stops, Trips. I'm trying to make the list of stops for each Route easily editable with a list of collection_select forms, where each presents a list of all of the stops to choose from. That was easy with the code below in
routes/_form.html.erb
<!-- handles the list of stops -->
<div class="stops_list" id="stops_list">
<%= f.label "Stops", :class => 'control-label'%>
<% params.merge!(:trips => {}) %>
<% puts params.inspect %>
<% trips = Trip.where('route_id = ?', #route.id).order('trips.order ASC') %>
<% #trips.each do |trip| %>
<%divId = 'stop'+trip[0].to_s %>
<div class="controls" id= <%= divId %>>
<%= f.label trip[0].to_s + '.', :class => 'control-label'%>
<%= collection_select params[:trips], trip[0].to_s, Stop.order('name ASC').all, :id, :name, {:selected => #trips[trip[0]]} %>
</div>
<% end %>
And then I update the proper tables in the DB from the routes_controller based on the data in params. I'd also like to be able to add and remove stops. I tried adding a 'remove stop' button, as below,
<%= button_to_function 'Remove stop',
'if(confirm("Really?")) {
$("#stops_list div").last().remove();
$.get("/routes/removeLastStop/'+(#route.id.to_s)+'");
}'%>
and it removes the proper collection_select form, but I then have to remove the stop from params. I tried doing an ajax call, as you can see, but then I have a new instance of the routes_controller, and the params I want to change is inaccessible. I'm not sure if I just set up the stops list wrong in the first place, or if there's a quick fix, but can anyone more experienced point me in the right direction?
EDIT:
Here's the entire form; it's pretty simple until you reach the area I've added
<%= form_for #route, :html => { :class => 'form-horizontal' } do |f| %>
<div class="control-group">
<%= f.label :name, :class => 'control-label' %>
<div class="controls">
<%= f.text_field :name, :class => 'text_field' %>
</div>
</div>
<div class="control-group">
<%= f.label :longname, :class => 'control-label' %>
<div class="controls">
<%= f.text_field :longname, :class => 'text_field' %>
</div>
</div>
<div class="control-group">
<%= f.label :color, :class => 'control-label' %>
<div class="controls">
<%= f.text_field :color, :class => 'text_field' %>
</div>
</div>
<div class="control-group">
<%= f.label :shape, 'Shape (KML file)', :class => 'control-label' %>
<div class="controls">
<%= f.file_field :shape, :class => 'file_field' %>
</div>
</div>
<div class="control-group">
<%= f.label :enabled, :class => 'control-label' %>
<div class="controls">
<%= f.check_box :enabled, :class => 'checkbox' %>
</div>
</div>
<!-- handles the list of stops -->
<div class="stops_list" id="stops_list">
<%= f.label "Stops", :class => 'control-label'%>
<% params.merge!(:trips => {}) %>
<% puts params.inspect %>
<% trips = Trip.where('route_id = ?', #route.id).order('trips.order ASC') %>
<% #trips.each do |trip| %>
<%divId = 'stop'+trip[0].to_s %>
<div class="controls" id= <%= divId %>>
<%= f.label trip[0].to_s + '.', :class => 'control-label'%>
<%= collection_select params[:trips], trip[0].to_s, Stop.order('name ASC').all, :id, :name, {:selected => #trips[trip[0]]} %>
</div>
<% end %>
<%= button_to_function 'Remove stop',
'if(confirm("Really?")) {
$("#stops_list div").last().remove();
$.get("/routes/removeLastStop/'+(#route.id.to_s)+'");
}'%>
</div>
<!-- adds submit button -->
<div class="form-actions">
<%= f.submit nil, :class => 'btn btn-primary' %>
<%= link_to t('.cancel', :default => t("helpers.links.cancel")),
routes_path, :class => 'btn' %>
</div>
<% end %>
Firstly you can add to Route class:
class Route < ActiveRecord::Base
has_many :trips
end
Firstly i'd like to advise you using decorators, inserting Models in Views is not the best practice.
Secondly you can use gem 'draper' and in RouteDecorator class you can add functions for creating something you want to use or display.
Thirdly you'd better use:
<div class="controls" id="stop<%= trip[0].to_s %>">
Forthly it would be better to use paths in REST-style:
/routes/2/stop/remove
/routes/2/stop/add
Fifthly can you give code of all form?
Probably we need to refactor it to look better and be easier for understanding.
Does Devise require a label for each textfield in its forms (ie: registration/new)?
When i delete the label in my code, ie:"<%= f.label :name %>", the textfield also disappears on the page. I want to show the textfield, but not the label.
devise/registrations/new.html.erb
<div class="row">
<div class="col-md-8">
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>
<div class="form-group>
<%= f.label :name %>
<%= f.text_field :name, autofocus: true, class: 'form-control', placeholder: 'Name' %>
</div>
<div class="form-group>
<%= f.label :email %>
<%= f.text_field :email, class: 'form-control', placeholder: 'Email' %>
</div>
<div class="form-group>
<%= f.label :password %>
<%= f.text_field :password, class: 'form-control', placeholder: 'Password' %>
</div>
<div class="form-group>
<%= f.label :password_confirmation %>
<%= f.text_field :password_confirmation, class: 'form-control', placeholder: 'Confirm password' %>
</div>
<div class="form-group">
<%= f.submit "Sign up", class: 'btn btn-success' %>
</div>
<div class="form-group">
<%= render "devise/shared/links" %>
</div>
<% end %>
</div>
</div>
After deleting label
Before deleting label
I've read its bad practice to exclude a label outside of a a textfield in a form, but Facebook does it ;)
I'm still new to RoR and any guidance is appreciated.
Does Devise require a label for each textfield
No.
Devise is a gem.
It's built using the same helpers and code as every other Ruby/Rails app. It does not have any special requirements to use labels.
In fact, the form helpers of Rails, and indeed every other helper, outputs vanilla HTML. If you can get away with not having labels in html, you can do it with your form helper.
Here's our code for a devise registration form (in HAML):
#app/views/devise/registrations/new.haml
.authenticate
= render "devise/shared/title"
= simple_form_for(User.new, as: resource_name, url: registration_path(resource_name)) do |f|
- if flash[:error]
.form-errors= flash[:error]
= f.error_notification
.form-inputs
= f.input :email, required: true, autofocus: true, placeholder: "Email"
%hr
= f.input :password, required: true, placeholder: "Password"
= f.input :password_confirmation, required: true, placeholder: "Confirm"
.form-actions
.bar
= link_to "", "#", rel: "submit", class: "ion-forward", title: "Register", data: { placement: "right" }
= render "devise/shared/links"
You should try the following:
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>
<%= f.text_field :name, autofocus: true, class: 'form-control', placeholder: 'Name' %>
<%= f.text_field :email, class: 'form-control', placeholder: 'Email' %>
<%= f.text_field :password, class: 'form-control', placeholder: 'Password' %>
<%= f.text_field :password_confirmation, class: 'form-control', placeholder: 'Confirm password' %>
<%= f.submit "Sign up", class: 'btn btn-success' %>
<%= render "devise/shared/links" %>
<% end %>
Remove any HTML elements to make sure they're not preventing Rails from showing the elements properly. If it works, you'll be able to rebuild the HTML and CSS to see what the problem is.
I used to roll my own authentication following Hartl's tutorial, but now that I need more advanced features such as password retrieval or email confirmation, I moved on to the Devise gem. However, I'm having some hard time navigating around what is already provided by devise. I'm doing some research in order to better understand it.
Meanwhile, I'm having problems with styling the sign in and sign up forms. For the sign up form, it looks fine at first, but the spacing becomes weird once I submit an invalid form.
For the sign in form, I cannot seem to figure out how to put the checkbox and the label on the same line. I tried all different kinds of divs and inline block. Please help me out. Thanks!
/devise/registrations/new.html.erb
<div class="center">
<h2>Sign up</h2>
<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>
<%= field_set_tag "Name" do %>
<%= f.text_field :first_name, placeholder: "First Name*", autofocus: true %><br>
<%= f.text_field :middle_name, placeholder: "Middle Name" %><br>
<%= f.text_field :last_name, placeholder: "Last Name*" %><br>
<% end %>
<%= field_set_tag "Account" do %>
<%= f.email_field :email, placeholder: "Email*" %><br>
<%= f.password_field :password, placeholder: "Password*" %><br>
<%= f.password_field :password_confirmation, placeholder: "Password Confirmation*" %>
<% end %>
<div><%= f.submit "Sign up", class: "btn btn-large btn-primary" %></div>
<% end %>
Already a user? <%= render "devise/shared/links" %>
</div>
/devise/sessions/new.html.erb
<div class="center">
<h2>Sign in</h2>
<%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %>
<%= devise_error_messages! %>
<%= f.email_field :email, placeholder: "Email", autofocus: true %><br>
<%= f.password_field :password, placeholder: "Password" %><br>
<div class="row">
<% if devise_mapping.rememberable? %>
<div>
<div class="remember-me">
<div><%= f.label :remember_me %></div>
<div><%= f.check_box :remember_me %></div>
</div>
</div>
<% end -%>
<%= f.submit "Sign in", class: "btn btn-primary" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
Check this stackoverflow link you will find the solution for the sign in page issue.
For the sign up page you are getting the spacing issue when input are not correct because your form is not showing the error messeges properly check out this image you will understand.
Disclaimer: I'm still very new to web development in general, so I'm sorry if this is a terrible question.
Why is everything in HTML evaluated on a line-by-line basis? I've noticed that any code (scripts?) that I throw into HTML requires me to cast it to its language on every single line like so:
<div class = "row">
<div class = "span6 offset3">
<%= form_for(#user) do |f| %>
<%= f.label :name %>
<%= f.text_field :name %>
<%= f.label :email %>
<%= f.text_field :email %>
<%= f.label :password %>
<%= f.text_field :password %>
<%= f.label :password_confirmation, "Confirmation" %>
<%= f.text_field :password_confirmation %>
<%= f.submit "Create My Account", :class => "btn btn-large btn-primary" %>
<% end %>
</div>
</div>
But why can't it evaluate the scripts like this:
<div class = "row">
<div class = "span6 offset3">
<%= form_for(#user) do |f|
f.label :name
f.text_field :name
f.label :email
f.text_field :email
f.label :password
f.text_field :password
f.label :password_confirmation, "Confirmation"
f.text_field :password_confirmation
f.submit "Create My Account", :class => "btn btn-large btn-primary"
end %>
</div>
</div>
Would it not make developing so much simpler to allow for this? To me, this just makes so much more sense, but its not done this way, probably for a good reason. If I'm writing out a fair bit of code (Ruby in this case), I am not a huge fan of casting every line at the start and finish.
I get that I'm having the HTML evaluate each line as an HTML object by casting it, but is it not possible to just have it assume that every line (or some other syntax - maybe actually use semi-colons) is a new piece of script to evaluate?
I guess what I'm asking is why are blocks of code evaluated this way and why hasn't it been made more efficient?
You can, but you have to do everything that the <%= %> tag does.
I'm not sure about the syntax in Ruby, but basically a tag like this:
<%= f.label :name %>
does output to the page, i.e. a shortcut for:
<% response.write(f.label :name) %>
So, you could do it it within a single script tag, if you add the commands for doing the output:
<%= form_for(#user) do |f|
response.write(f.label :name)
response.write(f.text_field :name)
et.c...