Bootstrap Grid Alignment Issues - html

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)

Related

How do I center a form_for form on a page? Rails app

This is my form code :
<%= form_for #user do |f| %>
<%=f.label :username %>
<%=f.text_field :username %><br>
<%= f.label :email %>
<%= f.text_field :email %><br>
<%= f.label :password%>
<%= f.password_field :password %><br>
<%= f.submit %>
<%end%>
I managed to center everything but the form!
You need to center the form with styles. For example:
<div class='center-form'>
<%= form_for(#user) do |f| %>
...
</div>
And then, in your stylesheets, add .center-form with required centerizing rules. Or you might do that without styles via Bootstrap. With "offset" rules (like offset-md-2) you might push div to center. But please refer to Bootstrap documentation to prototype and understand that.

gem 'country_select', github: 'stefanpenner/country_select' is not working with rails 4

I am using gem 'country_select', github: 'stefanpenner/country_select' in my gem file and in my form i have defined it like this:
<%= form_for(#account_detail) do |f| %>
<div class="field">
<%= f.label :city %><br>
<%= f.text_field :city %>
</div>
<div class="field">
<%= f.label :zip %><br>
<%= f.number_field :zip %>
</div>
<div class="field">
<%= f.label :first_name %><br>
<%= f.text_field :first_name %>
</div>
<div class="field">
<%= f.label :last_name %><br>
<%= f.text_field :last_name %>
</div>
<div class="field">
<%= f.label :country %><br>
<%= f.country_select("account_detail", "country") %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
on submit its giving error ActionView::Template::Error (wrong number of arguments (4 for 0)):
Which gem is best to show all countries?
I would use:
<%= f.country_select :country %>
If you like to prioritize some countries in the select pass them in in an array:
<%= f.country_select :country, {priority_countries: %w(<COUNTRY CODE i.e. US>), prompt: 'Select Country'} %>
You can add class: 'your-class' and id or whatever just as with any other field if you like. Hope it helps.
This should do!
<%= f.country_select :country, { priority_countries: ["GB", "US"], selected: "GB" } %>
I have solved this issue by adding this method in my model:
def country_name
country = ISO3166::Country[country_code]
country.translations[I18n.locale.to_s] || country.name
end
and in view change given line :
<%= f.country_select("account_detail", "country") %>
to this:
<%= f.country_select :country, format: :with_alpha2 %>
Hope this will help to someone else who will face this problem.

Rails 4: devise sign up form styling issues

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.

HTML Script Evaluations

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...

HTML <form> tag causing Rails form to submit a GET instead of POST request

I have a form that works fine until I add the tags for styling (I am using twitter bootstrap). The app is Rails 3.1 and I am on a mac. Here is a form that works fine with no issues:
<%= form_for #user do |f| %>
<% if #user.errors.any? %>
<div class="alert-message error">
<h2>Form is invalid</h2>
<ul>
<% for message in #user.errors.full_messages %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<%= f.label :email %>
<%= f.text_field :email %>
</div>
<div class="field">
<%= f.label :password %>
<%= f.password_field :password %>
</div>
<div class="field">
<%= f.label :password_confirmation %>
<%= f.password_field :password_confirmation %>
</div>
<div class="actions"><%= f.submit %></div>
<%end %>
Then, when I add the tag to the same exact form like this:
<form class="form-stacked">
<%= form_for #user do |f| %>
<% if #user.errors.any? %>
<div class="alert-message error">
<h2>Form is invalid</h2>
<ul>
<% for message in #user.errors.full_messages %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<%= f.label :email %>
<%= f.text_field :email %>
</div>
<div class="field">
<%= f.label :password %>
<%= f.password_field :password %>
</div>
<div class="field">
<%= f.label :password_confirmation %>
<%= f.password_field :password_confirmation %>
</div>
<div class="actions"><%= f.submit %></div>
<%end %>
</form>
This form appears to issue a GET request instead of a POST request. Instead of redirecting me upon save like it does without the tag, I see this in the URL:
http://localhost:3000/signup?utf8=%E2%9C%93&authenticity_token=Pt1vOp7lykCPFdj5BJeZ6xwJM2vy0JomMGSKoB%2FyYpU%3D&user%5Bemail%5D=test%40get.com&user%5Bpassword%5D=kevin&user%5Bpassword_confirmation%5D=kevin&commit=Create+User
I have tried specifying post in both the rails and HTML. Specifying it in rails using :method => post yields the same results (the GET request and URL info above). Using in the HTML looks like a POST request but the User object isn't saving (I belive this is the case because I am not getting redirected to the root_url, which is set in the controller and works fine when not using tag). Any ideas?
you want this:
<%= form_for #user, :html => { :class => "form-stacked", :id => "something" } do |f| %>
stuff goes in here as before
<% end %>