角度材料日期选择器大小错误

Question

我一直在尝试使用Material Datepicker，但是当我来到大屏幕时，拾取器格式会爆炸（见图），即使我将它定义为它使用的md内容环境并占用整个屏幕。当屏幕设置为较小尺寸时，如何限制拾取器容器的大小，因为它可以正常工作。设置它以使其永远不会超过给定数量的像素是有意义的，但我无法找到/找到CSS标签来执行此操作。

我从演示中复制了我的选择器HTML：

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

尝试此CSS不会产生任何结果

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

Answer 1

日期选择器似乎运行正常。 Here是我的笔。检查笔，看看您的完整代码中是否包含了所有内容。

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

我遇到过这个问题。

确保您没有其中一个css文件

table {
    width:100%;
}

删除这是我的解决方案