1

I am using the Angular Material 2 MdDatepicker in a side navigation. On mobile the view port is not wide enough to not obfuscate the date-picker when open. I have included an image here to show you what it looks like open.

enter image description here

Currently the left offset for this date-picker is 197.5px from the left. This style is inline and not easily overridden. I would like to find a way to either override this with CSS (I can not figure that out) or import he MdDatepicker in my component.ts file and override it's behavior or anything else you can think of. I need that number to be 44px, not 197.5px.

Below is the inline code I pulled out of the developer tools. The date-picker open up inside of a cdk-overlay and is offset within that div. 

<div id="cdk-overlay-1" class="cdk-overlay-pane" 
dir="ltr" style="pointer-events: auto; top: 416px; left: 197.5px;">

I am new to material and I'm hoping that even without support from Angular Material to do this, we can find a hack to do it. I would need to apply this offset only to certain date-pickers, not all of them. However, I would mark this answer accepted with a simple solution to adjust and customize that offset left or offset top position. I figure if I can do one I can do the other just as easily, I have looked into the MdDateicker code in the node_module and it is not apparent to me how to override this component.

Edric
  • 24,639
  • 13
  • 81
  • 91
Eric Bishard
  • 5,201
  • 7
  • 51
  • 75

1 Answers1

0

I had the same problem with a mat-datepicker that also has the cdk-overlay-pane, I found the solution for editing the styles in another post. Changing style of overlay container

::ng-deep .cdk-overlay-container {
  top: 416px;
  left: 197.5px;
}
Umpa
  • 334
  • 11
  • 16
  • In my case I also have a popup mat-menu that doesn't work with this change, but using the mat-datepicker you can set the styles like this: ::ng-deep .mat-datepicker-popup – Umpa May 08 '18 at 08:44