0
一連のタブがあり、その中にデータと日付ピッカーのリストがある問題があります。角度のある材質：<md-tabs>内の<md-datepicker>が正しく表示されない
Here's a Codepen with the issue replicated.
基本的に、私はタブがあり、タブ内のいくつかのデータを示す表があります。すべての行のフィールドの1つは私が変更できる日付なので、日付ピッカーです。任意の日付を変更しようとするたびに、ほとんどのタブコンテンツが非表示になり、スクロールバーが無効になります。そして、私は問題の原因を見つけることができません。
以下は私が使用しているコードです。 HTML：
<body ng-app="myApp" ng-cloak ng-controller="ProductController" layout="column">
<div class="col-md-12">
<md-content>
<md-tabs md-dynamic-height md-border-bottom md-selected="cashflowSelectedTab">
<md-tab label="Movements">
<md-content class="md-padding">
<div class="col-md-12">
<table class="table table-hover small">
<thead>
<tr>
<th>Invoice #</th>
<th>Issue date</th>
<th>Expiration date</th>
<th>Estimated bill. date</th>
<th>Move to:</th>
<th>Use</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="inv in invoicingPrevisionData | orderBy:'expectedBillingDate'">
<td>{{ inv.invoiceNumber }}</td>
<td>{{ inv.issueDate | date : "shortDate" }}</td>
<td>{{ inv.expirationDate | date : "shortDate" }}</td>
<td>{{ inv.expectedBillingDate | date : "shortDate" }}</td>
<td>
<md-datepicker ng-model="inv.wantedDate" md-hide-icons="calendar" />
</td>
<td>
<md-checkbox md-no-ink ng-model="inv.useWanted" class="md-primary" />
</td>
<td>{{ inv.amount | number: 2 }}</td>
</tr>
</tbody>
</table>
</div>
</md-content>
</md-tab>
</md-tabs>
</md-content>
</div>
</body>
特定のスタイル：
body {
overflow-y: scroll;
}
md-content {
background-color: rgb(255, 255, 255);
}
md-checkbox {
margin-bottom: 0px;
}
md-datepicker {
padding-right: 0px;
margin-right: -10px;
}
.md-datepicker-input {
font-size: 11px;
min-width: 90px;
}
.md-datepicker-open input.md-datepicker-input {
margin-left: 0px;
height: 18px;
}
.md-datepicker-input-container {
padding-bottom: 2px;
}
md-checkbox .md-icon {
transform: scale(0.8);
}
md-checkbox .md-container:after {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.md-button {
min-height: 24px;
}
.md-datepicker-triangle-button.md-button.md-icon-button {
height: 24px;
}
.md-datepicker-open .md-datepicker-input-container {
margin-bottom: 1px;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
padding: 4px;
vertical-align: middle;
}
とJavaScript：
angular.module('myApp', ['ngMaterial'])
.controller('ProductController', function($scope) {
$scope.chartFromDate = new Date();
$scope.cashflowSelectedTab = 0;
$scope.invoicingPrevisionData = [];
for (var i = 1; i <= 25; i++)
$scope.invoicingPrevisionData.push({
id: i,
invoiceNumber: i,
issueDate: new Date(),
expirationDate: new Date(),
billingDate: new Date(),
expectedBillingDate: new Date(),
wantedDate: new Date(),
useWanted: true,
amount: i
});
})
私はタブを持っています...私はテーブルを持っています...うわー！テーブルタブ！ – Charlie