Angular Datepicker are not work proper move on page scroll

Question

Html code

        <div class="col-5 col-md-3 px-0 daterange-picker">
          <div class="form-group">
            <div class="input-group">
              <input type="text" id="secondDateRange" class="form-control pl-2 pr-1 text-center overflow-"
                name="daterangeInput" daterangepicker [options]="options" />
            </div>
          </div>

          <!-- <input type="text" name="daterangeInput" daterangepicker [options]="options" /> -->
          <!-- <date-range-picker [instanceId]="'secondDateRange'" [options]="options" 
            [controlName]="'secondDateRange'" #dateRangePicker (rangeSelected)="onRangeSelected($event)">
            <div class="form-group">
              <div class="input-group">
                <input id="secondDateRange" class="form-control pl-2 pr-1 text-center" type="text" name="dateRange"
                  [value]="displayDateRange" placeholder="Date Range" formControlName="secondDateRange" [disabled]="true" />
              </div>
            </div>
          </date-range-picker> -->
        </div>
       

Please Fix the DatePicker

enter image description here

I try to change datepicker but problem are not solved??

Answer 1

use inspect of browser and style your date picker, after that in code use ::ngdeep.