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:
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With