md-datepickerがカスタムマージンを無視しています

私のプロジェクトでAngularJS Material datepickerを使用していますが、残念ながらそれを無視してカスタムCSSを使用しています。md-datepickerがカスタムマージンを無視しています

ここに抜粋です：

angular.module('myApp',['ngMaterial'])

body{background-color:white} 
 
.datePicker{ 
 
    margin-top:100px; 
 
}

<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- Angular Material style sheet --> 
 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"> 
 
</head> 
 
<body ng-app="myApp" > 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script> 
 

 
    <!-- Angular Material Library --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script> 
 

 
    <label>User Date</label><br> 
 
<md-datepicker ng-model='userDate' class="datePicker md-primary"></md-datepicker> 
 
    
 
</body>

出典

2017-12-15 Aravind Reddy

あなたがチェックし、ソリューションが動作するかどうか私に教えてできますか？ –

ありがとうございました... –

それが占有していますが、displayは右ではありません。 <md-datepicker>のために右のdisplayを設定します。

.datePicker { 
    margin-top: 100px; 
    display: block; 
}

プレビュー

ペン：https://codepen.io/anon/pen/ppJXeb

出典

2017-12-15 11:52:59

md-datepickerがカスタムマージンを無視しています

答えて

関連する問題