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

我一直在尝试使用材料日期选择器，但是当我来到大屏幕时，选取器格式爆炸（请参见图像），即使我将其定义为它使用的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; 
}

来源

2016-10-16 Sam Palmer

日期选择器似乎运行正常。 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>

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

来源

2016-10-16 15:25:42

我遇到了这个问题。

确保你没有在你的CSS文件中的一个

table { 
    width:100%; 
}

删除这对我来说

解决方案

来源

2017-07-18 03:43:02

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

回答

相关问题