Datepicker pop-up positioned incorrectly when inside of Dialog

[MarcosJanuario]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The datepicker is shown right under the input field inside the dialog

What is the current behavior?

The datapicker is shown as absolute position top and left set to 0px

For material Angular JS there was the same issue, and it was fixed

angular/material#5501

[crisbeto]

Can you post an example that shows the issue? You can use this Stackblitz as the base.

[prashantwalavalkar]

Any solution to this so far?

[MarcosJanuario]

@prashantwalavalkar I did not get the datepicker to work as it should be (centralized even though it's called over a first dialog). However, I found a way around to have a datepicker as I wanted. What I did was simply getting the mat-calendar component that is used INSIDE THE DATEPICKER. By working with the MatCalendar I can set it where I want and style it the way I want. The parameters expected to setup the calendar are pretty much similar to the ones used with Datepicker.

[jelbourn]

Closing since we weren't able to reproduce this. Feel free to open a new issue with a reproduction.

[Piraban]

I also facing this issue. When I give mat-datepicker inside the widget, shows date picker outside of the window

[prashantwalavalkar]

Hey..

Sorry for late reply on over all issue. But I am able to resolve this. It was '.mat-input-underline' div which was made hidden as in my design it wasn't required. But it is neccessary for correct positioning of date picker. So I made it hidden visibility hidden & z index to negative value instead of display none.

It started working again as date picker uses position of underline for its position.

Let me know if you are doing same & if this solution works for you.

:)

[lbarbula]

@prashantwalavalkar I was having the same issue and it was resolved by your fix. Thank you! How did you catch this?

[matosovaolga]

mat-input-underline

thank you for this fix!

[kamil-homer]

@prashantwalavalkar thanks!

In some cases you will also need ng-deep
::ng-deep .mat-input-underline{ visibility: visible; z-index: -999; display: block; }

[mani2448]

@jelbourn
Angular Material Datepicker is showing on left side sometimes and cdk-overlay-pane doesn't calculate its position according to datepicker input.
here is the link to images of the issue: https://stackoverflow.com/questions/54479177/why-angular-material-date-picker-sometimes-comes-on-top-left-side-of-screen-inst

[nibinbaby]

@prashantwalavalkar : thanks for the fix

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}