CODEWITHSUNDEEP
cssruby-on-railstwitter-bootstrap
skylerl
skylerl

Reputation: 4180

Scaffold CSS mixing with Bootstrap CSS for error_explanation/field_with_errors

I've been following Michael Hartl's Ruby on Rails Tutorial for getting the Bootstrap form validation to work instead of the built in RoR styling. My page is supposed to look like this (styles removed via inspector):

enter image description here

Instead I get: enter image description here

I have the following custom.scss

 @import "bootstrap-sprockets";
 @import "bootstrap";

 #error_explanation {
     color: red;
     ul {
         color: red;
         margin: 0 0 30px 0;
     }
 }

 .field_with_errors {
     @extend .has-error;
 }

This is what the view looks like:

<% if game.errors.any? %>
  <div id="error_explanation">
      <div class="alert alert-danger">
          <%= pluralize(game.errors.count, "error") %> prohibited this game from being saved:
      </div>
      <ul>
          <% @game.errors.full_messages.each do |msg| %>
              <li><%= msg %></li>
          <% end %>
      </ul>
  </div>

...

<div class="form-group">
<%= f.label :game_name, :class => "col-sm-2 control-label" %>
<div class="col-sm-10">
    <%= f.text_field(:game_name, {:class => "form-control"}) %>
</div>
</div>

I've tried searching for ways to have Bootstrap override the scaffold.scss, so I put the require custom shown below in my application.css

*= require_tree .
*= require_self
*= require custom

Most of the SO questions I've seen on this kind of issue have just been the Bootstrap classes not showing up due to using the wrong classes for their current version of Bootstrap, but the classes are loading properly, just alongside the scaffold CSS.

Upvotes: 1

Views: 682

Answers (1)

scieslak
scieslak

Reputation: 594

Scaffolds stylesheet is not really overriding your custom stylesheet. It adds extra properties to #error_explanation and .field_with_errors.

Properties like padding: 2px; background-color: red; display: table; etc. On the end of the day, the asset pipeline concatenates all stylesheets together resulting in your described problem.

If you don't need to keep scaffold stylesheet simply go to app/assets/stylesheets/ and remove scaffolds.scss. However, if you desire to keep scaffold stylesheet, you need to consider editing it manually or you may want to render different layouts for different parts of your application.

There is also a slight difference in .field_with_errors definition which in Michael Hartl's tutorial looks like this:

.field_with_errors {
  @extend .has-error;
  .form-control {
    color: $state-danger-text;
  }
}

Upvotes: 1

Related Questions