I want the text boxes to be less wide, maybe half the size? How would I do this? Here is what it looks like
I tried using col-xs-5 but that would ruin the vertical alignment.
<h2>
Add User
</h2>
<div class="user">
<div class="container-fluid">
<%= form_for(#user) do |f| %>
<%= f.label :first_name, :class => 'col-form-label' %>
<%= f.text_field :first_name, :placeholder => "First name", :class => 'form-control', :required => 'required' %><br>
<%= f.label :last_name, :class => 'col-form-label' %>
<%= f.text_field :last_name, :placeholder => "Last name", :class => 'form-control', :required => 'required' %><br>
<%= f.label :email, :class => 'col-form-label' %>
<%= f.email_field :email, :placeholder => "Email", :class => 'form-control', :required => 'required' %><br>
<%= f.label :password, :class => 'col-form-label' %>
<%= f.password_field :password, :placeholder => "Password", :class => 'form-control', :required => 'required' %><br>
<%= f.label :password_confirmation, "Confirm password" %>
<%= f.password_field :password_confirmation, :placeholder => "Confirm password", :class => 'form-control', :required => 'required' %><br>
<%= f.submit "Add", :class => "btn btn-lg btn-primary" %>
<% end %>
</div>
</div>
.container-fluid is a width of 100%.
So wrap the form in another div inside the container-fluid and set a max-width to like 500px. That should squeeze the form smaller. Play around with that.
Apply a width (or max-width) to the text boxes using CSS. That will only impact those elements and not the container around them.
Related
the checkbox helper isn't updating or inserting boolean values in the database.
A label has many attributes with values false as default and should become true when the checkbox is checked.but only the email attribute is being updated.
labelscontroller
def new
#label = current_user.labels.build
end
def create
#label = current_user.labels.build(label_params)
if #label.save
redirect_to #label
else
render 'new'
end
end
def labels_params
params.require(:label).permit(:name,:email,:avatar,:nick,:intro)
end
label/_form.html.erb
<%= form_for #label, :html => { :class => "form-horizontal label" ,multipart: true} do |f| %>
<div class="form-group", style="color: black;">
<%= f.label :name, :class => 'control-label col-lg-2' %>
<div class="col-lg-10">
<%= f.text_field :name, :class => 'form-control' %>
</div>
<%=f.error_span(:name) %>
</div> <div class="form-group", style="color: black;">
<%= f.label :email, :class => 'control-label col-lg-2' %>
<div class="col-lg-10">
<%= f.check_box :email %>
</div>
<%=f.error_span(:email) %>
</div>
<div class="form-group", style="color: black;">
<%= f.label :intro, :class => 'control-label col-lg-2' %>
<div class="col-lg-10">
<%= f.check_box :intro, checked: false %>
</div>
<%=f.error_span(:intro) %>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<%= f.submit nil, :class => 'btn btn-primary' %>
<%= link_to t('.cancel', :default => t("helpers.links.cancel")),
labels_path, :class => 'btn btn-default' %>
</div>
</div>
<% end %>
params
developement.rb server logs
database values after the create commit
rails console output of label when i ckecked both email and intro
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 have this form, and all of its element are rendered with the type="hidden", I don't know why this happens.
<%= form_for(:session, url: sessions_path) do |f| %>
<%f.text_field :username, :value => "Enter your user name", :class => "username-label" %>
<span class="email-icon"></span>
<% f.text_field :password, :value => "Enter your password", :class => "password-label" %>
<% f.submit "LOG IN", :class => "login-button" %>
<% end %>
With <% you are just executing the helpers. You need to use <%= ... %> to output the result of those helper calls:
<%= form_for(:session, url: sessions_path) do |f| %>
<%= f.text_field :username, :value => "Enter your user name", :class => "username-label" %>
<span class="email-icon"></span>
<%= f.text_field :password, :value => "Enter your password", :class => "password-label" %>
<%= f.submit "LOG IN", :class => "login-button" %>
<% end %>
<p><%= f.input :terms, :as => :boolean, :label => false, :boolean_style => :inline %>
Accept <%= link_to "Terms of use", terms_path,:remote => true %>
and <%=link_to "privacy Policy", privacy_path, :remote => true%></p>
It ends up looking like this
What is the best way to line them up on the same line.
Here's a rather simple way:
<%= content_for(:the_links) do %>
Accept <%= link_to "Terms of use", terms_path,:remote => true %>
and <%=link_to "privacy Policy", privacy_path, :remote => true%>
<% end %>
<%= simple_form_for #user do |f| %>
<%= f.input :email %>
<%= f.input :password %>
<%= f.input :terms, :as => :boolean, :label => content_for(:the_links)%>
<% end%>
Ensure the checkbox and text are small enough to fit in one row inside the container, then set display: inline; or float:left;
Try using wrapper_html like this:
<p>
<%= f.input :terms,
:as => :boolean,
:label => false,
:boolean_style => :inline,
:wrapper_html => { :style => 'display: inline' }
%>
Accept <%= link_to "Terms of use", terms_path,:remote => true %>
and <%=link_to "privacy Policy", privacy_path, :remote => true%>
</p>