CODEWITHSUNDEEP
htmlcssruby-on-railstwitter-bootstrap
mihai
mihai

Reputation: 38543

Rails field_with_errors and Bootstrap form-horizontal

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

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

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

The HTML (generated by rails) is:

<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 to illustrate the problem.

Anyone know how to fix this?

Upvotes: 4

Views: 2100

Answers (2)

mihai
mihai

Reputation: 38543

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;
}

Upvotes: 6

Thilo
Thilo

Reputation: 17735

You have some extraneous .control-group divs in there. Simply adding the error class to the enclosing control-group div should give you 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>

Upvotes: 0

Related Questions