Angular Material: md-datepicker CSS display issue

Question

I've upgraded to Angular Material 0.11.1. I'm using Angular JS v1.4.6. I'm trying to implement the new date-picker function. The issue I have is when I use the standard code as follows:

<md-content>
<h4>Standard date-picker</h4>
<md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
</md-content>

When I select the picker, I get a wierd display issue where half the screen is grey and can see part of the datepicker box. Once this is executed and try to select anything else with pop-up box the same thing happens. Anyone knows why this happening and how to fix it?

Images below:

Hey @Ka tech Did you ever work out what was happening here? I am having the same issue today but with a white block at the bottom of the page — amyloula
– amyloula, Commented Jul 30, 2016 at 15:41

amyloula · Accepted Answer · 2016-08-02 01:13:54Z

11

I myself was having the exact same issue, every time I clicked to open the md-datepicker, I had a large white block at the bottom of my page.

After spending some time monitoring the page behaviour on clicking the md-datepicker, I realised that on clicking the md-datepicker, angular material was dynamically changing the css styling of the <html> and <body> classes in my css stylesheets, like so:

<body class="" style="position: fixed; width: 100%; top: -231px;">

<html lang="en" style="overflow-y: scroll;">

as a quick fix, I have set my body class like so, to override the dynamic changes:

body {
top: 0px !important;
}

Hopefully this will help others with the same issue.

answered Aug 2, 2016 at 1:13

amyloula

1,5562 gold badges17 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Angular Dev Over a year ago

You are the man, this worked for me! People suggested v1.1.1 fixes it but thats not true!

amyloula Over a year ago

Glad it could be of some use! @Abdel

Prashant Pimpale · Accepted Answer · 2018-07-19 11:50:08Z

0

I faced the same issue and applied the following tag in md-datepicker, it worked all fine for me :)

style="position:fixed;"

edited Jul 19, 2018 at 11:50

Prashant Pimpale

10.7k10 gold badges52 silver badges88 bronze badges

answered Jul 19, 2018 at 11:18

Monica Kumar

1

Collectives™ on Stack Overflow

Angular Material: md-datepicker CSS display issue

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related