<Rails> Page format falls apart when rendering

Question

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.

Answer 1

I found out through this thread how to fix this problem.

Answer 2

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;
}

Answer 3

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>

Answer 4

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