Question

我正在使用ng-bootstrap datepicker并遇到了底部边框被切掉的问题，这可能是因为嵌套的div类被应用了，但是我不想研究每个嵌套的div类来弄清楚它，而是我想要覆盖ng-datepicker属性（转换），我通过Chrome开发工具发现了该属性会引起问题。请查看该问题的图片。因此，在chrome中，当我单击日历图标时，显示的日期选择器的底部边框被切掉，下面是正在应用的css / properties

.customer-grid

在Chrome中，当我将transform属性更改为

$('.js_toggler').on('click', function(ev) {
  ev.preventDefault;

  var box = $(this).closest("section").find('.customer-grid');

  if (!this.data('active')) {
    // If this is not active

    this.addClass('is-active');

    setTimeout(function() {
      this.data('active', '1');
      box.addClass('is-active');
    }, 100);
  } else {
    // If this is already active

    box.removeClass('is-active');

    this.removeClass('is-active');

    setTimeout(function() {
      this.removeData('active');
    }, 100);
  }
});

解决了该问题。我不想对样式进行硬编码，想要在style.css中定义角度为6的类，以便将其应用于所有ng-datepicker。如何覆盖此transform属性？

Answer 1

您可以为ngb-datepicker设置类或ID，并为其设置特定样式。

  <ngb-datepicker class="dropdown-menu show mydatepicker">

在style.css

.mydatepicker{
    padding: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    transform: translate(0px, -42px);
}

Answer 2

这是我的HTML代码段

> <div class="q-datepicker position-relative w-100">
                    <input
                        formControlName="From"
                        class=" form-control rounded-corner bg-white primary-font-color"
                        placement="bottom"
                        placeholder=""
                        [minDate]=""
                        ngbDatepicker
                        #d="ngbDatepicker"
                        readonly=""
                    />
                    <button
                        type="button"
                        (click)="d.toggle()"
                    >
                        <i class="far fa-calendar-alt"></i>
                    </button>
                </div>

我添加了div标签“ q-datepicker”类，然后在style.css中添加了以下样式

.q-datepicker{
ngb-datepicker{
  left:0 !important;
  width: 350px;
  .ngb-dp-months{
    .ngb-dp-month{
      width: 100%;
      .ngb-dp-weekday{
        width: 2.5rem;
        margin-right: .5rem;
      }
      .ngb-dp-week{
        .ngb-dp-day{
            width: 2.5rem;
            margin-right: .5rem;
            div{
                width: 100%;
            }
        }
      }
    }
  }
}

}

Answer 3

我终于能够在style.css中使用！important覆盖ngbdatepicker，如下所示：

    ngb-datepicker{
  left: 0px !important;
  top: 0px !important;
  padding-top: 0px !important;
  padding-right: 0px !important;
  padding-bottom: 0px !important;
  padding-left: 0px !important;
  position: absolute !important;
  transform: translate(0px, 28px)!important;
}

如何覆盖ng-bootstrap datepicker element.style

3 个答案: