Angular ngx-boostrap datepicker position issue on mobile screen

user_10987869 0
Viewed 1653

ngx-bootstrap/datepicker is working fine when larger screen but not in mobile screens. Need help.

enter image description here

But when I reduce the screen size to mobile (also on actual mobile devices), it opens in wrong position.

enter image description here

ngx-bootstrap/datepicker version 5.3.2

"ngx-bootstrap": "^5.3.2",

This is how I am using that in the template.

<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>
ngx-bootstrap angular datepicker css
2 Answers

Fixed the view on mobile by adding the below css for screen-sizes less than 600px;

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

I used this css and set the adaptivePosition property to false. My problem fixed.

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