matDatepicker open calendar at bottom of page instead of just next to text box

Question

In my project I added material angular with

ng add @angular/material  

and html code as follow for matDatepicker

<div class="form-group row NextDelivery">
                                <label for="NextDelivery"
                                       class="col-sm-3 control-label font-weight-bold mt-1">NextDelivery</label>
                                <div class="col-sm-9">
                                    <mat-form-field color="accent" appearance="fill">
                                    <input matInput  type="text" formControlName="NextDelivery" class="form-control"
                                           id="NextDelivery" matInput [matDatepicker]="picker"  (dateChange)="onMyDateChange($event)"  />
                                           <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                                           <mat-datepicker #picker touchUi style="position:fixed;"></mat-datepicker>
                                        </mat-form-field>
                                </div>
                            </div>

and on .ts page

import { MatDatepickerModule, MatNativeDateModule ,MatFormFieldModule ,MatInputModule ,MatButtonModule } from '@angular/material';

@NgModule({
  imports: [
    
    //Material 
    MatDatepickerModule,       
    MatNativeDateModule,     
    MatFormFieldModule ,
    MatInputModule ,
    MatButtonModule 
  ],
  declarations: [
    SubscriptionsComponent,
    SubscriptionsFormComponent,
    SubscriptionsDetailsComponent,
  ],
})

but Calendar appears at the bottom of page instead of next to text box as pop up.