md-select inside md-dialog does out of dialog DOM so, bottom value in inline style is calculated wrong that disapper the select

[ervbsankar]

Bug, feature request, or proposal:

md-select or md-datepicker does out of DOM so, it is not positioned correctly inside md-dialog

What is the expected behavior?

md-select or md-datepicker should allign with md-dialog DOM

What is the current behavior?

md-select or md-datepicker does out of DOM so, it is not positioned correctly inside md-dialog

What are the steps to reproduce?

this is user search web page

1. main page of UI have search results from search button with name as search criteria
2. there is button next to search button that open dialog to add new users
3. this dialog have date of birth date picker and select to select male/female
4. bottom css is calculated automatically in cdk-overlay-1 that moves the select towards top

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: https://goo.gl/DlHd6U

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"@angular/animations": "^4.3.3",
"@angular/cdk": "^2.0.0-beta.8",
"@angular/material": "^2.0.0-beta.8",
grome broswer

Is there anything else we should know?

[ervbsankar]

<div id="cdk-overlay-3" class="cdk-overlay-pane" dir="ltr" style="pointer-events: auto;**bottom: 190.5px; left: 476px;**"></div>

above style is calculated automatically inside cdk-overlay-container

[julianobrasil]

Have you tried beta.10? It should have been fixed in #4696 (may/2017). Could you provide a plunk?

Also:

this is user search web page

where is this search web page? Provide a link.

[ervbsankar]

i have tried beta.10, it is still happening when main page have search results.

It is working fine, when main page doesnot have any search results.

[ervbsankar]

[ervbsankar]

please see the screenshot, Date picker is not opening because bottom value in style is pushing the date picker towards up.

Please see below picture, date picker is top of the UI.

I still feel it is a defect.

[ervbsankar]

removing the bottom value in style after inspecting it is showing the date picker. Please see below picture

[crisbeto]

I couldn't reproduce it purely by putting a datepicker inside a dialog. Can you post a Plunkr showing the issue?

[julianobrasil]

@ervbsankar, are you doing something that potentially change css, like dynamically changing the app's theme?

[ervbsankar]

when it is 80% it is showing the date picker. please see below picture

[julianobrasil]

It seems to be something in your project. It is not related to datepicker inside dialogs nor with lack of screen space (see the picture bellow, that, even without space, the calendar popup is visible). Somewhere you're messing with datepicker css (are you using other CSS libraries? Bootstrap, Materialize etc)

Here is a plunk (try to reproduce the problem you're facing): https://plnkr.co/edit/4mtNqOcxCynrw4UmrnrG?p=preview

[ervbsankar]

It is not with CSS, after figuring out, I found that
removing height value (height: '500px') in below line, brought the date picker to position correctly.
this.modalRef = this.modalService.open(CustomDialogComponent,{width: '400px',});

Please let me know how to set the height of Dialog.

[julianobrasil]

this.modalRef = this.modalService.open(CustomDialogComponent,{width: '400px',height:'400px'});

[ervbsankar]

setting value to height is making date picker or Options go disappear.

cdk-overlay value is calculated with below value, this makes dialog to show full height. Below css value is not set in my CSS it is calculated by angular materials.
position: static;

[ervbsankar]

it is happening with ngx-bootstrap modal too. date and select of angular materials are moving towards top of the screen and
this popup of date and select of angular materials showing behind of ngx-bootstrap modal.

[josephperrott]

Unfortunately without providing a reproduction case it is not possible for us to troubleshoot the bug and fix it. If you can provide a reproduction case we can go from there:

Here is a plunkr that has the situation you described. If you can reproduce the issue from here we can take a look.

[jelbourn]

We haven't been able to reproduce this issue. Feel free to open a new issue if you are able to provide a reproduction via StackBlitz.

[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.}