Angular Material Datepicker Popup positioned wrong

Question

First of all, this material datepicker is based on: https://stackblitz.com/angular/qmnrlgabjly?file=src%2Fapp%2Fdatepicker-views-selection-example.ts

I have copied all the code i need from: https://material.angular.io/components/datepicker/overview however the popup for choosing year and date is always positioned wrong (see picture under):

I have the exact same code as the example, and my scss-file looks like this:

@import "../../../shared/styles/bootstrap/_variables.scss";
@import "../../../shared/styles/bootstrap/_mixins";
@import "../../../shared/styles/app/variables.scss";
@import '~@swimlane/ngx-datatable/index.css';
@import '~@swimlane/ngx-datatable/themes/bootstrap.css';
@import '~@swimlane/ngx-datatable/themes/dark.scss';
@import '~@swimlane/ngx-datatable/themes/material.scss';
@import '~@swimlane/ngx-datatable/assets/icons.css';
@import "~@angular/cdk/overlay-prebuilt.css";
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

.home-container {
    margin: 0 auto;
    max-width: map-get($container-max-widths, "lg");

    .home-logo {
        display: flex;
        justify-content: center;

        img {
            width: 240px;
        }
    }

    .home-text {
        text-align: center;

        @include media-breakpoint-up(lg) {
            text-align: left;
        }
    }

    .home-text-big {
        font-size: 3.9375rem;
    }


    
}
:host ::ng-deep .datatable-row-odd {
    background-color: #eee;
}


:host ::ng-deep .datatable-header {
    background-color: #f05050;
    padding: 0.5rem 0 0 0.5rem;
    font-size: 1.2rem;
}

:host ::ng-deep .datatable-body-cell {
    vertical-align: middle;
    padding: 0.5rem 0 0.5rem 0;
}

ol {
    font-size: 2.25rem;
}

#manualInput p {
    font-size: 1rem;
}

#allContent {
   display: none;
}

#ptags {
    font-size: 1rem;
}

ul{
    list-style: circle;
    padding: 0;
}

.secondLevel {
   font-size: 1.5rem;
}

.container {
    max-width: none;
}

input {
    width: 100%;
}

button {
    margin-bottom: 1rem !important;
    width: 7rem;
}

hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 3px solid #dc3545;
}

.example-month-picker .mat-calendar-period-button {
    pointer-events: none;
}

.example-month-picker .mat-calendar-arrow {
    display: none;
}

::ng-deep .mat-form-field-underline {
    visibility: visible;
    z-index: -999;
    display: block;
}

And HTML:

<mat-form-field appearance="fill">
                    <input matInput [matDatepicker]="dp" [formControl]="date">
                    <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
                    <mat-datepicker #dp [touchUi]="true" disabled="false"
                                    startView="multi-year"
                                    (yearSelected)="chosenYearHandler($event)"
                                    (monthSelected)="chosenMonthHandler($event, dp)"
                                    panelClass="example-month-picker">
                    </mat-datepicker>
                </mat-form-field>

The popup-window is rendered OUTSIDE the App-root actually, like this:

BTW, the mat-datepicker itself is positioned correct inside the app-root somewhere, but since i cant control the popup it gets positionen waay outside.

Does anyone have any suggestions? Tell me if you need something more, will respond quickly! Thanks!

Answer 1

use

display="anchored"