I created a sample app to play around with rails. I'm having trouble with the page format of my site when a page is rendered. The text fields moves out of place from it's previous position and the format is just ruined. Please see the site and just click the button and you'll see what I'm talking about.
Here is my controller:
class BooksController < ApplicationController
def new
#books = Book.new
end
def show
end
def create
#books = Book.new(book_params)
if #books.save
redirect_to new_book_path, :flash => { :success => "Book Added"}
else
render 'new'
end
end
def update
end
def edit
end
def destroy
end
private
def book_params
params.require(:book).permit(:title, :author, :genre, :no_of_items)
end
end
here my views/new.html.erb
<h1>Books#new</h1>
<p>Find me in app/views/books/new.html.erb</p>
<% flash.each do |key, value|%>
<div class="flash <%= key %>"><%= value %></div>
<% end %>
<div class="form-horizontal">
<div class="control-group row-fluid form-inline">
<%= form_for #books do |f| %>
<%= render 'shared/error_message' %>
<p>
<div class="fields">
<%= f.label :title, "Title:"%>
<%= f.text_field :title %><br/><br/>
</div>
<div class="fields">
<%= f.label :author, "Author:" %>
<%= f.text_field :author %><br/><br/>
</div>
<div class="fields">
<%= f.label :no_of_items, "No. of Items:" %>
<%= f.text_field :no_of_items%><br/><br/>
</div>
<div class="fields">
<%= f.label :genre, "Genre:" %>
<%= f.text_field :genre%><br/><br/>
</div>
<p>
<%= submit_tag "Add book"%>
</p>
</p>
<% end %>
</div>
</div>
Can anyone help me tell what's happening and a fix for this? Thanks.
ANSWER:
Hi everyone thanks for the advises but I found out through Rails 3: "field-with-errors" wrapper changes the page appearance. How to avoid this? thread how to fix this problem. I can't answer my question within 6 hours so I'll answer this after the restriction has ended.
Each label and input is being wrapped in an additional div element with the class field_with_errors.
You could give the field_with_errors class an display: inline-block; property, or try formatting your form like the example in the Bootstrap docs.
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
</form>
http://getbootstrap.com/2.3.2/base-css.html#forms
There is some unnecessary formatting you've added to the new.html.erb. One of rails' strength is the minimal amount of work created with helpers such as form_for
<h1>Books#new</h1>
<p>Find me in app/views/books/new.html.erb</p>
<% flash.each do |key, value|%>
<div class="flash <%= key %>"><%= value %></div>
<% end %>
<div class="form-horizontal">
<div class="control-group row-fluid form-inline">
<%= form_for #books do |f| %>
<%= render 'shared/error_message' %>
<%= f.label :title, "Title:"%>
<%= f.text_field :title %>
<%= f.label :author, "Author:" %>
<%= f.text_field :author %>
<%= f.label :no_of_items, "No. of Items:" %>
<%= f.text_field :no_of_items %>
<%= f.label :genre, "Genre:" %>
<%= f.text_field :genre %>
<%= f.submit "Add book" %>
<% end %>
</div>
</div>
first you don't align your input fields correctly, i see some margin-left (for the first filed is 60px, for the second is 45px ...) so i suggest you to remove this css margin-left for your input and add this to your label:
label {
width:150px; /*Or however much space you need for the form’s labels*/
float:left;
}
this is a quick tutorial about how to align your fields
then after you submit your form with empty fields, rails will trigger some errors, and wrap each field (also label) which has error with div class="field_with_errors like this: <div class="field_with_errors"><input type="text"..... /></div> : this div will return your field to the next line so if you would that your fields still inline you just add this css to your css file :
.field_with_errors{
display: inline;
}
I found out through this thread how to fix this problem.
Related
I was looking at the question below, which has a good answer for what I will ask, but I have a doubt. I cannot comment yet so that is why I am making another post.
How to submit multiple, duplicate forms from same page in Rails - preferably with one button
This is my view for the form
new.html.erb
<h1 class="page-title">Nuevo Precio</h1>
<hr class="title-division">
<div class="alta-form-container">
<%= form_tag "/precios" do %>
<% 2.times do %>
<%= render 'form', precio: #precio %>
<% end %>
<%= submit_tag "Submit", class: "btn btn-success" %>
<% end %>
<%= link_to 'Lista Precios Cliente', client_precios_path %> <br><%= link_to 'Ver', [#client, #precio] %> <br>
</div>
and my _form.html.erb
<div class="field">
<%= label_tag :precio, "Precio" %>
<%= text_field_tag "precios[][precio]" %>
</div>
<div class="field">
<%= text_field_tag "precios[][cant_acomodato]" %>
</div>
<div class="field">
<%= hidden_field_tag "precios[][client_id]" %>
</div>
When I submit the form I get an error that says
'No route matches [POST] "/precios"'
which I'm guessing is because on my new.html.erb I wrote form_tag "/precios" do
Any thoughts on what I should change or edit? thanks in advance
actually you have only one form here, because _form.html.erb will generate only inputs, that according to form below
<%= form_tag "/precios" do %>
that will generate
form action="/precios" method="post">
if you want leave it like that, you should add to your config/routes.rb
post '/precios', to: 'controller_name#method_name', as: :controller_name_method_name
your situation:
post '/precios', to: 'PreciosController#create', as: :precios_create
also check this
documentation
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)
I am trying to create a form that accepts HTML. So that when I type <br> or use divs it understands and populated my content block accordingly. Can anyone point me in the right direction for this?
Here's the form I am using if that helps:
<%= simple_form_for(#daily) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<%= f.input :title %>
<%= f.input :content %>
</div>
<div class="form-actions">
<%= f.button :submit %>
</div>
<% end %>
Replace <%= f.input :content %> with <%= f.text_area :content %>. That doesn't do much but make a multi-line input area (looks better). However, when you display the data on your webpage (i.e. after you submit the form), you can put something like this:
<p>#daily.content.html_safe</p>
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 %>
I don't know which is the best or right way to make something, so I'm looking for suggestions.
Stage:
I am using Rails 3 to make some web app.
Imaging two models: Canvas and Zone.
A canvas object intents to be a square in which there will be four zone's (north, south, east and west).
Each zone has these attributes: text:string and rgb_color:string.
I want to render a HTML form in which user must capture a Canvas registry, in other words, in this form will have four groups of zones fields.
Problem:
How can I capture all of them in one HTML form?
If I would have only one zone I can do something like this:
<%= form_for(#zone) do |f| %>
<div class="field">
<%= f.label :text %><br />
<%= f.text_field :text %>
</div>
<div class="field">
<%= f.label :rgb_color %><br />
<%= f.text_field :rgb_color %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
But how should I do it with four zones?
You can do this with accepts_nested_attributes_for and fields_for:
Model:
class Canvas < ActiveRecord::Base
has_many :zones
accepts_nested_attributes_for :zones
end
Controller:
class CanvasesController < ApplicationController
def new
#canvas = Canvas.new
4.times { #canvas.zones.build }
end
end
View:
<%= form_for(#canvas) do |f| %>
<%= f.fields_for :zones do |zone| %>
<div class="field">
<%= zone.label :text %><br />
<%= zone.text_field :text %>
</div>
<div class="field">
<%= zone.label :rgb_color %><br />
<%= zone.text_field :rgb_color %>
</div>
<% end %>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
For more details and explanation have a look at this:
Nested Model Form Part 1
Nested Model Form Part 2