Rails 中的 .field_with_errors 使用插件破坏了 Twitter Bootstrap 3 输入样式

Posted 2023-03-06

【中文标题】Rails 中的 .field_with_errors 使用插件破坏了 Twitter Bootstrap 3 输入样式

【英文标题】：.field_with_errors in Rails breaks Twitter Bootstrap 3 input styles with addons

【发布时间】：2015-01-13 15:05:04

【问题描述】：

我有 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
...

生成这样的 html（日期选择器标记）

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

当我遇到错误时，Rails 将 label 和 input 包装为具有类 field_with_errors 的 div。

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

在我的 application.css.sass 中，我使用以下内容扩展了 field_with_errors：

.field_with_errors 
  @extend .has-error

在那之后，大多数简单的字段成为这个日期选择器的正常样式接受：输入字段失去了圆角，插件部分保持默认（甚至不是红色）。结合其他领域，这看起来很难看。这怎么能解决？这是此字段的屏幕截图 - http://minus.com/lbeNYx1yXyqk4C

【问题讨论】：

.date 的 CSS 是什么？

.date 没有 CSS。我认为这只是一些用于 javascript 事件的服务类。实际上，我用这个 gem github.com/Nerian/bootstrap-datepicker-rails 做日历

.has-error 继续.form-group，因此您的@extend 不起作用；这不是 DOM 中的正确位置。尝试完全杀死 field_with_errors 包装器 div：***.com/a/5268106/3342739

我想过。但在那种情况下，我必须拒绝突出显示字段的内置功能:)

【参考方案1】：

使用以下 css 解决问题

.field_with_errors 
    display: block !important;

.field_with_errors > .datetimepicker 
    display: none !important;

【讨论】：

你从哪里得到.datetimepicker？