Rails Bootstrap how to format form_for (width grid collapses)

Question

I'm trying to make a form with bootstrap-sass. I need to find the optimal configuration of bootstrap classes to make it look nice. It is not showing up the way I expect, specifically when the browser width is smaller than a certain size the spaces between labels and form fields collapse and it doesn't look good anymore. It would be ok if it only happens on small width, but that's not the case. I would really appreciate some help with this, really, what is the best way to format the form-horizontal with bootstrap?

Here's my code:

<form class="form-horizontal center" role="form">
<%= form_for @user do |f| %>
  <div class="field">
    <%= f.label :fname, "First name:", class: "col-md-4 control-label" %>
    <%= f.text_field :fname %>
  </div>
  <div class="field">
    <%= f.label :lname, "Last name:", class: "col-md-4 control-label" %>
    <%= f.text_field :lname %>
  </div>
  <div class="field">
    <%= f.label :email, "Email:", class: "col-md-4 control-label" %>
    <%= f.text_field :email %>
  </div>
  <!--div class="form-group" -->
  <div class="field">
    <%= f.label :comments, "Comments:", class: "col-md-4 control-label" %>
    <%= f.text_field :comments %>
  </div>
  <div class="field">
    <%= f.radio_button :attend, 'yes', :checked => true, class: "col-md-4 control-label" %>
    <%= f.label :attend, 'I will attend.', :value => "yes" %><br />
    <%= f.radio_button :attend, 'no', :checked => false, class: "col-md-4 control-label" %>
    <%= f.label :attend, "I will not attend.", :value => "no" %>
  </div>
  <div class="field">
    <%= f.check_box :workshop, class: "col-md-4 control-label" %>
    <%= f.label :workshop, "Checkbox Description" %>
  </div>
  <div class="field">
    <div class="col-md-4">
    <%= f.submit "Submit", class: "btn btn-default btn-primary" %>
    </div>
  </div>
<% end %>
</form>

As you can see from commented out code, I first used form-group class, but it wasn't working well. Again, the problem is that spaces between labels and text fields collapse when width of the browser is less than certain size. The labels, which are right-aligned, lose their alignment. Browser has to be almost full screen to show up correctly, which isn't right because there's plenty of space for it to show up correctly on smaller width. I was following this guide http://getbootstrap.com/css/#grid

Edit: Added email field in the code, because it's of different size and easier to see the problem.

Rahul Singh · Accepted Answer · 2019-12-09T04:22:20.227

18

take a look at bootstrap v3 doc here http://getbootstrap.com/css/#forms-horizontal and you don't need to add form tag since you are already using form_for

 <%= form_for @user, :html => {:class => "form-horizontal center"} do |f| %>
      <div class="form-group">
        <%= f.label :fname, "First name:", class: "col-md-4 control-label" %>
        <div class="col-md-8">
          <%= f.text_field :fname, class: "form-control" %>
        </div>
      </div>
      <div class="form-group">
        <%= f.label :lname, "Last name:", class: "col-md-4 control-label" %>
        <div class="col-md-8">
          <%= f.text_field :lname, class: "form-control" %>
        </div>
      </div>

      <div class="form-group">
        <%= f.label :comments, "Comments:", class: "col-md-4 control-label" %>
        <div class="col-md-8">
          <%= f.text_field :comments, class: "form-control" %>
        </div>
      </div>
      <div class="radio">
        <%= f.radio_button :attend, 'yes', :checked => true %> I will attend.
        <br />
        <%= f.radio_button :attend, 'no', :checked => false %> I will not attend.
      </div>
      <div class="checkbox">
        <%= f.check_box :workshop %> Checkbox Description
      </div>

      <%= f.submit "Submit", class: "btn btn-default btn-primary" %>  
 <% end %>

edited Dec 09 '19 at 04:22

answered Feb 11 '14 at 19:02

Rahul Singh

3,417
2
25
32

No, it doesn't work. The first two fields just happened to be the same size in terms of letters. With another field it's easier to see the formatting break down. (I'll edit subject to include another field of different size) – Chemist Feb 11 '14 at 20:28
after reading http://getbootstrap.com/css/#grid-options it seems if u descrease browser width, it starts collapsing horizontally...and that's what happening with your case...m i right.? – Rahul Singh Feb 11 '14 at 20:33
yes you're right! so just changing it to `xs` instead of `md` makes it work much better! This is great, the only problem I have with the form now is that the horizontal scroll bar appears (for no reason). – Chemist Feb 11 '14 at 20:53
2

By the way, `class: "form-horizontal center"` in form_for tag doesn't add css class, it must be written like this to work: `:html => {:class => "form-horizontal center"}` – Chemist Feb 28 '14 at 21:05
As I understand it if you use different "col" sizes in the same class you can set the width differently depending on the screen size. For example, class: "col-xs-2 col-md-4" would set the width to 2 if it <= 576 pixels and 4 if >= 768 pixels. See the bootstrap grid documentation: https://v4-alpha.getbootstrap.com/layout/grid/ – Mark Davies Sep 26 '17 at 08:59

Rails Bootstrap how to format form_for (width grid collapses)

1 Answers1

Linked