fix(datepicker): prevent calendar clipping on small screens. For #4558

Author: jelbourn

src/components/datepicker/datePicker.js

@@ -319,9 +319,7 @@
     this.calendarButton.disabled = isDisabled;
   };
 
-  /**
-   * Resizes the input element based on the size of its content.
-   */
+  /** Resizes the input element based on the size of its content. */
   DatePickerCtrl.prototype.resizeInputElement = function() {
     this.inputElement.size = this.inputElement.value.length + EXTRA_INPUT_SIZE;
   };
@@ -354,6 +352,7 @@
   /** Position and attach the floating calendar to the document. */
   DatePickerCtrl.prototype.attachCalendarPane = function() {
     var calendarPane = this.calendarPane;
+    calendarPane.style.transform = '';
     this.$element.addClass('md-datepicker-open');
 
     var elementRect = this.inputContainer.getBoundingClientRect();
@@ -365,7 +364,22 @@
     var paneLeft = elementRect.left - bodyRect.left;
 
     // If the right edge of the pane would be off the screen and shifting it left by the
-    // difference would not go past the left edge of the screen.
+    // difference would not go past the left edge of the screen. If the calendar pane is too
+    // big to fit on the screen at all, move it to the left of the screen and scale the entire
+    // element down to fit.
+    if (paneLeft + CALENDAR_PANE_WIDTH > bodyRect.right) {
+      if (bodyRect.right - CALENDAR_PANE_WIDTH > 0) {
+        paneLeft = bodyRect.right - CALENDAR_PANE_WIDTH;
+      } else {
+        paneLeft = 0;
+        var scale = bodyRect.width / CALENDAR_PANE_WIDTH;
+        calendarPane.style.transform = 'scale(' + scale + ')';
+      }
+
+      calendarPane.classList.add('md-datepicker-pos-adjusted');
+    }
+
+
     if (paneLeft + CALENDAR_PANE_WIDTH > bodyRect.right &&
         bodyRect.right - CALENDAR_PANE_WIDTH > 0) {
       paneLeft = bodyRect.right - CALENDAR_PANE_WIDTH;
@@ -382,7 +396,7 @@
 
     calendarPane.style.left = paneLeft + 'px';
     calendarPane.style.top = paneTop + 'px';
-    document.body.appendChild(this.calendarPane);
+    document.body.appendChild(calendarPane);
 
     // The top of the calendar pane is a transparent box that shows the text input underneath.
     // Since the pane is floating, though, the page underneath the pane *adjacent* to the input is

src/components/datepicker/datePicker.spec.js

@@ -110,6 +110,21 @@ describe('md-date-picker', function() {
     document.body.removeChild(element);
   });
 
+  it('should shink the calendar pane when it would otherwise not fit on the screen', function() {
+    // Make the body narrow so that the calendar pane won't fit on-screen.
+    document.body.style.width = '300px';
+
+    // Open the calendar pane.
+    element.querySelector('md-button').click();
+    $timeout.flush();
+
+    // Expect the calendarPane to be scaled by an amount between zero and one.
+    expect(controller.calendarPane.style.transform).toMatch(/scale\(0\.\d+\)/);
+
+    // Reset the body width.
+    document.body.style.width = '';
+  });
+
   it('should disable the internal inputs based on ng-disabled binding', function() {
     expect(controller.inputElement.disabled).toBe(false);
     expect(controller.calendarButton.disabled).toBe(false);