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!
