Rails field_with_errors and Bootstrap form-horizontal

Question

In my custom.css.scss file, I have:

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

The problem is that for horizontal Bootstrap forms, the fields will not remain in rows.

HTML (generated by rails):

 <div class="control-group"> <div class="field_with_errors"><label class="control-label" for="bookmark_url">Url</label></div> <div class="controls"> <div class="field_with_errors"><input id="bookmark_url" name="bookmark[url]" size="30" type="text" value=""></div> </div> </div> 

Here is a jsfiddle example to illustrate the problem.

Does anyone know how to fix this?

Answer 1

I fixed it with the following css:

 .form-horizontal .field_with_errors { margin: 0; } .form-horizontal .field_with_errors:before, .form-horizontal .field_with_errors::after { display: block; clear: none; } 

Answer 2

You have extraneous .control-group divs. Just adding the error class to the attached control-group div, you should get the desired result:

 <div class="control-group error"> <label class="control-label" for="bookmark_url">Url</label> <div class="controls"> <input id="bookmark_url" name="bookmark[url]" size="30" type="text" value=""> </div> </div>