Parent mddialog design breaks if the calender input is shown in a popup

[nsjithin]

Is there any significance for this override because it breaks the parent dialog if the datetimepicker is shown in a dialog?

https://github.com/michael-mcanulty/md-datetimepicker/blob/c0564537affab3e001a50fb4e89ebc5adf79e46f/src/calendar.css#L213

[michael-mcanulty]

Setting the padding to 0px is just for looks so there is not wide border. The inline is not needed and should be changed to 'overflow:hidden !important'. If it were changed, would that stop the problem you are having?

I have tested the dialog on two android phones and two browsers by visiting the demo online, and by using hammer.js touch emulator on my pc and I haven't seen it break, so I hope it is just the inline... The inline was left over from a past version. I used to have the time below the calendar, but it didn't fit well on a phone so I had to make a separate view.

On Fri, Jul 28, 2017 at 2:30 AM, nsjithin notifications@github.com wrote:

Is there any significance for this override because it breaks the parent dialog if the datetimepicker is shown in a dialog?

https://github.com/michael-mcanulty/md-datetimepicker/blob/ c0564537affab3e001a50fb4e89ebc5adf79e46f/src/calendar.css#L213

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/michael-mcanulty/md-datetimepicker/issues/4, or mute the thread https://github.com/notifications/unsubscribe-auth/ASl-NDwPZ-ze6Y9BBlFL0r3AGH_MRz20ks5sSaoegaJpZM4OmYHh .

[vinujan59]

Hi i also getting this problem, here are the screen shots, this is okay this overlay is not aligned center. upper part is truncated. Here the parent dialog is broken.

I tried changing "overflow:hidden !important"

[michael-mcanulty]

Thank you for the details, I see now that the positioning strategy of the calendar inside the md dialog inside another md-dialog isn't working. I will work on this.

On Jul 30, 2017 11:23 PM, "Vinujan.S" notifications@github.com wrote:

Hi i also getting this problem, here are the screen shots, [image: 1] https://user-images.githubusercontent.com/11666269/28764795-0e861440-75e5-11e7-9e18-7181e445c37c.JPG this is okay [image: 2] https://user-images.githubusercontent.com/11666269/28764797-0e872470-75e5-11e7-9f81-d25aabd356a3.JPG this overlay is not aligned center. [image: 3] https://user-images.githubusercontent.com/11666269/28764796-0e871d90-75e5-11e7-8496-ec040a1a55be.JPG upper part is truncated. [image: 4] https://user-images.githubusercontent.com/11666269/28764798-0e899570-75e5-11e7-9ee6-a92a910f6fb5.JPG Here the parent dialog is broken.

I tried changing "overflow:hidden !important" [image: 5] https://user-images.githubusercontent.com/11666269/28765147-db3eea1a-75e6-11e7-92da-c26f0a1e3058.JPG

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/michael-mcanulty/md-datetimepicker/issues/4#issuecomment-318979207, or mute the thread https://github.com/notifications/unsubscribe-auth/ASl-NHImuty0V6Hg5Yv7RGKKT5gXHcSJks5sTXL8gaJpZM4OmYHh .

[nsjithin]

For the time being, I fixed the issue by adding an extra class to dialog and overrided the display: inline to display: block. MdDialogConfig got a param named panelClass which add a custom class to the dialog.

config: MdDialogConfig = {
        disableClose: false,
        width: '70%',
        panelClass: 'custom-dialog-class',
        height: '',
        position: {
            top: '5%',
            bottom: '',
            left: '',
            right: ''
        }
    };

And in css

.custom-dialog-class .mat-dialog-container {
    display: block !important;
    padding: 24px !important;
}

Hope this helps.

[michael-mcanulty]

I completed the needed changes to facilitate the use of a modal encapsulating the date/time picker modal. To demonstrate the changes, I added a modal example to the demo.

Upgrade Required:

If you used npm to install, please change your package.json version to: "md-datetimepicker": "^2.1.1" and run npm install.

Or, if you used the Typesript files in Github, please comment out any custom css you may have added to the calendar and drag the following files into your project:

timesheet.ts, datetimepicker.ts, calendar.css, datetimepicker-content.css

Thank you for showing me these errors, I really appreciate it.