角度材料日期選取器大小錯誤

我一直在嘗試使用材料日期選擇器，但是當我來到大屏幕時，選取器格式爆炸（請參見圖像），即使我將其定義爲它使用的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

角度材料日期選取器大小錯誤

回答

相關問題