CODEWITHSUNDEEP
cssruby-on-rails
Aaron Dufall
Aaron Dufall

Reputation: 1177

Align Form Helper Vertically

I'm using the following code to produce a form. Currently, there is no styling what so ever and all the CSS files are empty.

<h1>New Post</h1>
<%= form_for @post do |f| %>
  <%= f.text_field :title %>
  <%= f.text_area :body %>
  <%= f.submit %>
<% end %>

This is the contents of the application.rb

<!DOCTYPE html>
<html>
<head>
  <title>Bloog</title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>
<body>
  <div class="sidebar two columns">
    <nav>
      <ul>
        <li><%= link_to "New post...", new_post_path %></li>
      </ul>
    </nav>
  </div>
  <div>
    <%= yield %>
 </div>
</body>
</html>

This produces a form that is aligned horizontally instead of stacking the elements vertically.

horizontal form using default from_for helper

What I would like it to look like is this, which was the default behaviour that I was expecting.

how i thought the from was going to render

Upvotes: 0

Views: 442

Answers (1)

Matzi
Matzi

Reputation: 13925

Add some boxing to the elements to group them. Divs or paragraphs for example, just as it is done in default scaffolding.

Use it like this:

<h1>New Post</h1>
<%= form_for @post do |f| %>
  <p><%= f.text_field :title %></p>
  <p><%= f.text_area :body %></p>
  <p><%= f.submit %></p>
<% end %>

Upvotes: 3

Related Questions