Ok. I can't figure this out. The problem is that
<div class="span6 offset3">
<%= form_for(@problem) do |f| %>
<%= render 'shared/error_messages' %>
<%= f.label :name, raw("Your name:") %>
<%= f.text_field :name %>
<%= f.label :email, raw("E-mail address (for confirmation):") %>
<%= f.text_field :email %>
<%= f.label :description, raw("Enter a description of the problem:") %>
<%= f.text_area :description %>
<%= f.submit "Submit", class: "btn btn-large btn-primary" %>
<% end %>
I figured it out. This has to do with Twitter-Bootstrap, which has a class
.alert in it. That is the class responsible for showing errors with correct styling.
Bootstrap installs who knows where and is easiest to access through Developer Tools in browser (that sucks). I couldn't find where the source of the gem is located (it pointed me to folder that is not a folder). So I copied twitter css files from github directly into my app -> vendor/assets/stylesheets . Now I can deal with the problem.
I changed the style of .alert class inside one of bootstrap files (
_alerts.scss) and added extra classes in my
custom.css.scss file to make border around inputs red on errors.
Somehow this whole thing worked better in previous apps I made, I think this has to do with changes they made to bootstrap and possibly the fact that I messed with bootstrap's original design (like a full-width header).
The biggest thing that led me to solution was that the class is
.alert and not
.error like I thought. Also big thanks to browser developer tools, I couldn't find my files without you.
Edit: Here's the download instructions on Bootstrap to get the files: http://getbootstrap.com/getting-started/#download