Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular Material: md-datepicker CSS display issue

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:

Before Photo After Date selected

like image 532
Ka Tech Avatar asked Oct 05 '15 20:10

Ka Tech


1 Answers

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.

like image 137
amyloula Avatar answered Oct 27 '22 04:10

amyloula