Angular Material - Datepicker moves off bounds

Question

I'm using Angular 4 with Material 2

I have an input with a button that opens a date picker

I use flex-layout to push the button to the right side of the screen, like that:

<div fxFlex>

      <span fxFlex></span>

      <md-input-container>
        <input mdInput placeholder="Search in Date" [mdDatepicker]="myDatepicker">
        <button mdSuffix [mdDatepickerToggle]="myDatepicker"></button>
      </md-input-container>
      <md-datepicker #myDatepicker></md-datepicker>
    </div>

The problem is that whenever the date picker is opened, part of it hides off the bounds of the window

And there is no way to scroll right...

How can i get around it?

Answer 1

I updated to the latest @angular/material version From 2.0.0-beta.6 to 2.0.0-beta.7 and it works fine now. I guess that it was a bug that they fixed in the latest version.