CODEWITHSUNDEEP
htmlcssruby-on-railsrubytwitter-bootstrap
Cristiano
Cristiano

Reputation: 3189

Rails error messages break signup form

I'm following this tutorial: http://ruby.railstutorial.org/chapters/sign-up#top and I have a problem with styles for error messages from rails.

I want to accomplish this:

http://ruby.railstutorial.org/images/figures/blank_signup_password_digest_bootstrap_4_0.png

But instead of that my form breaks and I get this ugly form:

enter image description here

I checked a source code and there are nov div tags inserted instead of label and input:

enter image description here

How to override that behavior and accomplish that form is only highlighted like in the tutorial?

Thank you.

EDIT 1:

I found out where is the problem. I'm using Bootstrap 3.1.0 and extend is not working there. So, this is not working:

#error_explanation {
  color: #f00;
  ul {
    list-style: none;
    margin: 0 0 18px 0;
  }
}

.field_with_errors {
  @extend .control-group;
  @extend .error;
}

And because of that this code doesn't work like it should:

<% if @user.errors.any? %>
  <div id="error_explanation">
    <div class="alert alert-error">
      The form contains <%= pluralize(@user.errors.count, "error") %>.
    </div>
    <ul>
    <% @user.errors.full_messages.each do |msg| %>
      <li>* <%= msg %></li>
    <% end %>
    </ul>
  </div>
<% end %>

I can't find a way to make that extend working. Like control-group is not present...

EDIT 2:

Ok, when I add this code to config/environment.rb the form doesn't break but can't accomplish red lines around forms where is wrong input:

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
  html_tag.html_safe

Upvotes: 1

Views: 1334

Answers (2)

AWM
AWM

Reputation: 1140

Why are you using Bootstrap 3? The tutorial tells you to use

gem 'bootstrap-sass', '2.3.2.0'

in your gemfile. You really should do so, because the tutorial provides you with a whole lot of code that is meant to be used with Bootstrap 2. Of course, it breaks with Bootstrap 3. If you really want to use B3 you will have to change quite a few class names in your views. Among other changes do this:

  • change div class="alert alert-error" to div class="alert alert-danger"
  • apply form-group and form-control classes to your form fields (see example here).

  • in your CSS:

    .field_with_errors {
  @extend .has-error;
}

  • Then do all the other changes mentioned here.

Upvotes: 2

Richard Peck
Richard Peck

Reputation: 76774

This seems to be quite a common error - have you ever tried either of these:

@extend documentation

Precompile

Failing that, you may wish to try asset precompiling:

#config/environments/production.rb
config.serve_static_assets = true
config.assets.compile = false

$ rake assets:precompile RAILS_ENV=production

Mixins

This won't fix it directly, but you could create a mixin for the styles, and include that like this:

@mixin error {
    display: block;
    etc
}

.field_with_errors {
  @extend .control-group;
  @extend .error;
}

Upvotes: 0

Related Questions