Angular Material Date Picker Size

Question

I've been trying to use the Material Datepicker, but when I come to large screens the picker format blows up (see image). How do I limit the size of the picker container as it works correctly when the screen is set to smaller sizes. It makes sense to set it so it never gets larger than a given number of pixels but I can't work out/find the CSS tags to do this.

My HTML of the picker is copied from the demo:

 <md-content layout-padding>
    <div layout-gt-xs="row">
      <div flex-gt-xs>
        <h4>Standard date-picker</h4>
        <md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
      </div>
    </div>
    </md-content>

Trying this CSS yields no results

.md-datepicker-input-container {
  width: 50%;
  margin-left: 0px;
}

Answer 1

I have run into to this issue.

Somewhere in my css all tables' width was set to 100%

table {
    width:100%;
}

When I removed that, the md-datepicker stopped acting weird.