Search code examples
cssruby-on-railstwitter-bootstraptwitter-bootstrap-rails

rails-bootstrap-forms applies some styles but not others


I am using the rails-bootstrap-forms gem along with twitter-bootstrap-rails. When I use the bootstrap_form_for function, I get forms that are only partially styled:

<%= bootstrap_form_for([@investor.property, @investor], layout: :horizontal, label_col: "col-sm-2", control_col: "col-sm-10", role: "form") do |f| %>
  <% if @investor.errors.any? %>
    <div id="error_explanation">
      <h4><%= pluralize(@investor.errors.count, "error") %> prohibited this investor from being saved:</h4>
      <ul>
      <% @investor.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>
  <%= f.text_field :name, label: "Name", placeholder: 'Your name here' %>
  <%= f.email_field :email, label: "Email", placeholder: 'you@example.com' %>
  <%= f.number_field :equity_share, label: "Equity share", placeholder: '% of total equity' %>
  <%= f.number_field :priority, label: "Priority", placeholder: 'Payment priority' %>
  <%= f.form_group do %>
    <%= f.submit "Submit" %>
  <% end %>
<% end %>

Generates:

enter image description here

Which you can see applies the horizontal layout but does not format the labels properly. The HTML generated looks good:

<form accept-charset="UTF-8" action="/things/1/investors" class="form-horizontal" id="new_investor" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="QGzNsTGG41FPfnQ6n9yrka7caZayIu4fLpqToX5ASng=" /></div>
  <div class="form-group"><label class="control-label col-sm-2" for="investor_name">Name</label><div class="col-sm-10"><input class="form-control" id="investor_name" name="investor[name]" placeholder="Your name here" type="text" /></div></div>
  <div class="form-group"><label class="control-label col-sm-2" for="investor_email">Email</label><div class="col-sm-10"><input class="form-control" id="investor_email" name="investor[email]" placeholder="you@example.com" type="email" /></div></div>
  <div class="form-group"><label class="control-label col-sm-2" for="investor_equity_share">Equity share</label><div class="col-sm-10"><input class="form-control" id="investor_equity_share" name="investor[equity_share]" placeholder="% of total equity" type="number" /></div></div>
  <div class="form-group"><label class="control-label col-sm-2" for="investor_priority">Priority</label><div class="col-sm-10"><input class="form-control" id="investor_priority" name="investor[priority]" placeholder="Payment priority" type="number" /></div></div>
  <div class="form-group"><label class="control-label col-sm-2"></label><div class="col-sm-10">
    <input class="btn btn-default" name="commit" type="submit" value="Submit" />
</div></div></form>

And I have not (to my knowledge) overridden any of the Bootstrap CSS or other formatting. The "icon:" command also does not change the output at all, if that's a useful clue. What might be the issue? Thanks in advance.

UPDATE: I have attempted to replace twitter-bootstrap-rails with bootstrap-sass following Brad Werth's suggestion. However, I get an "unclosed block" error in application.css.scss whenever I include the @import "bootstrap"; line. Here is the contents of application.css.scss:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
 *= require rails_bootstrap_forms
 *= require jquery.ui.datepicker
*/
@import "bootstrap-sprockets";
@import "bootstrap";
@import "custom";

"custom" is just my site's basic css. I only get an error if the @import "bootstrap"; line is included, regardless of other lines or the require statements.


Solution

  • This issue finally resolved itself when I upgraded to Ruby 2.1.1.