Angular Material Datum Picker Größe Fehler

Question

Ich habe versucht, das Material Datepicker zu verwenden, aber wenn ich zu großen Bildschirmen komme das Picker-Format explodiert (siehe Bild), obwohl ich es definieren eine MD-Content-Umgebung verwendet und nimmt den ganzen Bildschirm ein. Wie beschränke ich die Größe des Auswahlcontainers, wie es ordnungsgemäß funktioniert, wenn der Bildschirm auf kleinere Größen festgelegt wird. Es macht Sinn, es so einzustellen, dass es niemals größer wird als eine gegebene Anzahl von Pixeln, aber ich kann die CSS-Tags dafür nicht herausfinden/finden.

Mein HTML des Pickers aus der Demo kopiert:

<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> 

Sie diese CSS Ausbeute

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

Answer 1

Die Datumsauswahl scheint gut zu laufen keine Ergebnisse Versuch. Here ist mein Stift. Überprüfen Sie den Stift und sehen Sie, ob Sie alles in Ihren vollständigen Code aufgenommen haben.

HTML

<div ng-controller="AppCtrl" ng-cloak="" class="datepickerdemoBasicUsage" ng-app="MyApp"> 
    <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> 
</div> 

JS

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache']).controller('AppCtrl', function($scope) { 
    $scope.myDate = new Date(); 
}); 

CSS

.datepickerdemoBasicUsage { 
    /** Demo styles for mdCalendar. */ } 
    .datepickerdemoBasicUsage md-content { 
    padding-bottom: 200px; } 
    .datepickerdemoBasicUsage .validation-messages { 
    font-size: 12px; 
    color: #dd2c00; 
    margin-left: 15px; } 

Answer 2

Ich habe in dieser Frage laufen.

Stellen Sie sicher, Sie in einem Ihrer CSS-Dateien

table { 
    width:100%; 
} 

entfernen das war die Lösung für mich

nicht haben