CODEWITHSUNDEEP
htmlcssruby-on-railsform-for
Sebastian Zeki
Sebastian Zeki

Reputation: 6874

How to render partial form as a horizontal form in rails 4

I have a partial (triggered by ajax) on my main page which consists of a form. I would like the form to be displayed horizontally rather than vertically. I have tried everything such as wrapping in <form class="form-inline"> I've tried <%=f.number_field :pointsSpend, :class => "checkbox inline"%> and then altering the css to display: inline but none of it seems to work

The main form in which the partial is rendered:

 <div class="row">
        <div class="col-md-12">
            <%= link_to image_tag("biceps.jpg"),'#', id: 'ChallengeButton', class: "btn btn-lg btn-primary" %>
            <div id="challengeCentre"></div>
        </div>
    </div>

The form

<%= form_for(@challenge) do |f| %>

  <% if @challenge.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@challenge.errors.count, "error") %> prohibited this challenge from being saved:</h2>

      <ul>
      <% @challenge.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :pointsSpend %><br>
    <%= f.number_field :pointsSpend %>
  </div>
  <div class="field">
    <%= f.label :rules %><br>
    <%= f.text_area :rules %>
  </div>

  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

</form>

Upvotes: 1

Views: 143

Answers (1)

cjav_dev
cjav_dev

Reputation: 3105

You should be able to pass the class to the form_for method like this:

<%= form_for(@challenge, html: { class: 'form-inline' }) do |f| %>

  <% if @challenge.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@challenge.errors.count, "error") %> prohibited this challenge from being saved:</h2>

      <ul>
      <% @challenge.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :pointsSpend %><br>
    <%= f.number_field :pointsSpend %>
  </div>
  <div class="field">
    <%= f.label :rules %><br>
    <%= f.text_area :rules %>
  </div>

  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

</form>

Upvotes: 1

Related Questions