While experimenting with Rails, I created a sample app but encountered a problem with the page format when it is rendered. The text fields shift out of place and the overall format gets ruined. You can check out the issue on this site, just click the button to see what I mean.
This 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's 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>
I need help figuring out why this issue is happening and how to fix it. Thanks!
SOLUTION: After some research, I was able to find a helpful thread on fixing this issue related to the field appearance changes during page rendering: Rails 3: "field-with_errors" wrapper changes the page appearance. How to avoid this?. I will provide an answer once the time restriction for self-answer has passed.