2016-12-25 5 views
1

Chromeで表示されている角度の材料のmd-datepicker要素が、デフォルトの日付から間違ったカレンダー位置(たとえば、今後1〜2ヶ月)で開きます。同様に、年ビューを選択すると、デフォルトの日付から1年または2年が開きます。角材Chromeで日付ピッカーの位置が間違っています

この投稿(Angular material datepicker position is wrong except on Chrome)は、この質問の逆を奇妙なことに、Chromeで動作していますが他のブラウザでは機能していないと言っています。その質問に対する回答は、FireFox、IE、Safariで修正されたことを示しています。

ChromeデスクトップとAndroidで同じ(壊れた)結果がテストされました。

ここには、問題を示す2つの別々のCodepenリポジトリがあります。

http://codepen.io/anon/pen/pjGPGZ?editors=101

http://codepen.io/DionOrr/pen/pNmQzb

コード2番目のリンクからです:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"> 
<body ng-app="myApp"> 
    <div ng-controller="myController"> 
    <p>Inside md-input-container 
     <br> 
     <md-input-container> 
     <label>Test datepicker</label> 
     <md-datepicker ng-model="testdate1" md-placeholder="Enter date"></md-datepicker> 
     </md-input-container> 
     <br> 
     <md-input-container> 
     <label>Test datepicker</label> 
     <md-datepicker ng-model="testdate2" md-placeholder="Enter date"></md-datepicker> 
     </md-input-container> 
     <br> 
     <md-input-container> 
     <label>Test datepicker</label> 
     <md-datepicker ng-model="testdate3" md-placeholder="Enter date"></md-datepicker> 
     </md-input-container> 
     <br> 
     <md-input-container> 
     <label>Test datepicker</label> 
     <md-datepicker ng-model="testdate4" md-placeholder="Enter date"></md-datepicker> 
     </md-input-container> 
     <br> 
     <md-input-container> 
     <label>Test datepicker</label> 
     <md-datepicker ng-model="testdate5" md-placeholder="Enter date"></md-datepicker> 
     </md-input-container> 
     <br> 
     <md-input-container> 
     <label>Test datepicker</label> 
     <md-datepicker ng-model="testdate6" md-placeholder="Enter date"></md-datepicker> 
     </md-input-container> 
     <br> 
     <md-input-container> 
     <label>Test datepicker</label> 
     <md-datepicker ng-model="testdate7" md-placeholder="Enter date"></md-datepicker> 
     </md-input-container> 
     <br> 
     <md-input-container> 
     <label>Test datepicker</label> 
     <md-datepicker ng-model="testdate8" md-placeholder="Enter date"></md-datepicker> 
     </md-input-container> 
    </p> 
    <p>Not inside md-input-container 
     <br> 
     <md-datepicker ng-model="testdate9" md-placeholder="Enter date"></md-datepicker> 
     <br> 
     <md-datepicker ng-model="testdate10" md-placeholder="Enter date"></md-datepicker> 
     <br> 
     <md-datepicker ng-model="testdate11" md-placeholder="Enter date"></md-datepicker> 
     <br> 
     <md-datepicker ng-model="testdate12" md-placeholder="Enter date"></md-datepicker> 
     <br> 
     <md-datepicker ng-model="testdate13" md-placeholder="Enter date"></md-datepicker> 
     <br> 
     <md-datepicker ng-model="testdate14" md-placeholder="Enter date"></md-datepicker> 
     <br> 
     <md-datepicker ng-model="testdate15" md-placeholder="Enter date"></md-datepicker> 
     <br> 
     <md-datepicker ng-model="testdate16" md-placeholder="Enter date"></md-datepicker> 
    </p> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js" type="text/javascript"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-animate.min.js" type="text/javascript"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-aria.min.js" type="text/javascript"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-messages.min.js" type="text/javascript"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    var app = angular.module('myApp', ['ngMaterial', 'ngMessages']); 
    app.controller('myController', function($scope) { 
     $scope.testdate1 = new Date(); 
     $scope.testdate2 = new Date(); 
     $scope.testdate3 = new Date(); 
     $scope.testdate4 = new Date(); 
     $scope.testdate5 = new Date(); 
     $scope.testdate6 = new Date(); 
     $scope.testdate7 = new Date(); 
     $scope.testdate8 = new Date(); 
     $scope.testdate9 = new Date(); 
     $scope.testdate10 = new Date(); 
     $scope.testdate11 = new Date(); 
     $scope.testdate12 = new Date(); 
     $scope.testdate13 = new Date(); 
     $scope.testdate14 = new Date(); 
     $scope.testdate15 = new Date(); 
     $scope.testdate16 = new Date(); 
    }); 
</script> 

特にページの下下datepickersをしようと、クロム(デスクトップまたはモバイルのいずれか)でそれらを開いてください。

この質問(github.com/angular/material/issues/5055)は、Angular Materialの日付ピッカーと同様の問題を示しており、md-input-containerに間違って配置されているとみなしています。しかし、上記の2番目のコードページリンクは、datepickerがmd-input-containerの中にあるかどうかを問わず、問題が再発することを示しています。

簡単な修正はありますか?

+0

正しい位置で開きます –

答えて

1

はい、これはChromeの問題です。 Issue #10144を参照してください。問題を解決するためにPull Request #10177を提出しましたが、まだマージされていません。

ここにコードペンが固定されています:Basic Usage Fixedです。

私は自分のブランチへの依存性を追加しました:

https://rawgit.com/ppham27/material/dist/dist/angular-material.js 

および1.5.9に角度のバージョンを更新すると、あまりにも、新しいスタイルシートを使用していました。

これはもちろん、一時的な修正です。恒久的な修正は、プル要求が通過するのを待つ必要があります。私はプロセスをスピードアップする方法があるかどうかは不明です。

関連する問題