Question

I'm following the rails 4.0.0 tutorial from http://www.railstutorial.org/book/_single-page.

I checked everything to match the tutorial but seem not to be able to locate the issue.

My GemFile:

gem 'rails', '4.0.0'
gem 'bootstrap-sass', '2.3.2.0'

All the bootstrap things seem to work but the @extend for the errors don't seem to work. I know there is a difference between bootstrap 2 and 3. There fore I followed the tutorial on this part to the the letter :)

My custom.css.scss

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

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

The generated HTML:

<...>
<div id="error_explanation">
    <div class="alert alert-error">
      The form contains 5 errors.
    </div>
    <ul>
      <li>* Name can&#39;t be blank</li>
      <li>* Email can&#39;t be blank</li>
      <li>* Email is invalid</li>
      <li>* Password can&#39;t be blank</li>
      <li>* Password is too short (minimum is 6 characters)</li>
    </ul>
</div>


      <div class="field_with_errors"><label for="user_name">Name</label></div>
      <div class="field_with_errors"><input id="user_name" name="user[name]" type="text" value="" /></div>

      <div class="field_with_errors"><label for="user_email">Email</label></div>
      <div class="field_with_errors"><input id="user_email" name="user[email]" type="text" value="" /></div>

      <div class="field_with_errors"><label for="user_password">Password</label></div>
      <div class="field_with_errors"><input id="user_password" name="user[password]" type="password" /></div>

<...>

enter image description here

enter image description here

Was it helpful?

Solution

Stupid me. I generated something with scaffold when I started this project. Totally forgot about it.

If you want to get rid of the scaffold follow instructions: Getting rid of scaffold.css in rails

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top