移动屏幕上的 Angular ngx-bootstrap datepicker 位置问题答案

【问题标题】：Angular ngx-boostrap datepicker position issue on mobile screen移动屏幕上的 Angular ngx-bootstrap datepicker 位置问题
【发布时间】：2020-03-28 20:49:28
【问题描述】：

ngx-bootstrap/datepicker 在大屏幕时工作正常，但在移动屏幕上却不行。需要帮助。

但是当我将屏幕尺寸缩小到移动设备时（也在实际移动设备上），它会在错误的位置打开。

ngx-bootstrap/datepicker 版本 5.3.2

"ngx-bootstrap": "^5.3.2",

这就是我在模板中使用它的方式。

<div class="row">
  <div class="col-xs-12 col-12 col-md-6 form-group">
    <input type="text"
    class="form-control"
    style="cursor: pointer"
    readonly="true"
    [minDate]="minDate"
    [maxDate]="dt"
    #dp="bsDatepicker"
    bsDatepicker [(bsValue)]="bsValue"
    (bsValueChange)="UpdateDashboard()">
  </div>
</div>

【问题讨论】：

我会使用 html 5 网格并将对齐项目设置为居中。不附加左边距。
我试过 style="cursor: pointer;justify-items: center;margin-left: auto;"但同样的事情。你能详细说明我应该做什么改变吗？
显示必须是网格。打开网页按f12并定位元素，然后你可以在那里测试你想要的样式。
我发现这部分导致了问题。如果我删除 transform: translate 那么它可以工作。但是，它是 ngx-bootstrap/datepicker 的一部分
我还不知道怎么解决。

标签： css angular datepicker ngx-bootstrap

【解决方案1】：

通过为小于 600 像素的屏幕尺寸添加以下 css 来修复移动设备上的视图；

   @media screen and (max-width:600px){
       ::ng-deep bs-datepicker-container{
           transform: translate3d(0px, 647px, 0px)!important;
       }
    }

【讨论】：

【解决方案2】：

我使用了这个 css 并将 AdaptivePosition 属性设置为 false。我的问题解决了。

@media screen and (max-width:600px){
    bs-datepicker-container{
        position: fixed !important;
        transform: translate3d(10px, 240px, 0px)!important;
    }
 }

【讨论】：