.field_with_errors in Rails breaks Twitter Bootstrap 3 input styles with addons

Question

I have HAML

...
.row
  .col-md-3.form-group
    = offer.label :departure_date, "Abfahrt"
    .input-group.date
      = offer.text_field :departure_date, class: "form-control", readonly: ""
      %span.input-group-addon
        %i.glyphicon.glyphicon-calendar
...

that generates such HTML (datepicker markup)

<div class="row">
    <div class="col-md-3 form-group">
        <label for="offer_departure_date">Abfahrt</label>
        <div class="input-group date">
            <input class="form-control" readonly="readonly" type="text" name="offer[departure_date]" id="offer_departure_date">
            <span class="input-group-addon">
                <i class="glyphicon glyphicon-calendar"></i>
            </span>
        </div>
    </div>
</div>

When I get error, Rails wraps label and input with a div having class field_with_errors.

<div class="row">
    <div class="col-md-3 form-group">
        <div class="field_with_errors"><label for="offer_departure_date">Abfahrt</label></div>
        <div class="input-group date">
            <div class="field_with_errors"><input class="form-control" readonly="readonly" type="text" value="" name="offer[departure_date]" id="offer_departure_date"></div>
            <span class="input-group-addon">
                <i class="glyphicon glyphicon-calendar"></i>
            </span>
        </div>
    </div>
</div>

In my application.css.sass I've extended field_with_errors with the following:

.field_with_errors 
  @extend .has-error

After that most simple fields became normal styling accept of this datepicker: the input field lost its rounded corners, addon part remained default (even not red). In combination with other fields this looks ugly. How can that be fixed? Here is screenshot with this field - http://minus.com/lbeNYx1yXyqk4C

`.date` has no css. That is just some service class used for javascript events, I think. Actually, I use this gem https://github.com/Nerian/bootstrap-datepicker-rails for calendar — kovpack, Nov 16 '14 at 19:07
`.has-error` goes on the `.form-group`, hence why your `@extend` isn't working; it's not the right position in the DOM. Try killing the field_with_errors wrapper div altogether: http://stackoverflow.com/a/5268106/3342739 — cvrebert, Nov 16 '14 at 21:06
I thought about that. But in that case I have to refuse from build-in functionality of fields highlighting :) — kovpack, Nov 16 '14 at 21:10

score -1 · Answer 1 · edited Nov 20 '16 at 11:27

-1

Use the following css to fix the issue

.field_with_errors {
    display: block !important;
}
.field_with_errors > .datetimepicker {
    display: none !important;
}

edited Nov 20 '16 at 11:27

Danh

5,916
7
30
45

answered Nov 20 '16 at 11:06

HannibalBarca

11
2

Where did you get `.datetimepicker`? – Chloe May 04 '17 at 04:18

.field_with_errors in Rails breaks Twitter Bootstrap 3 input styles with addons

1 Answers1