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.