Question

我遇到一个问题，其中包含一系列标签，其中包含数据列表和日期选择器。

Here's a Codepen with the issue replicated.

基本上，我有一个标签，标签内有一个显示一些数据的表格。每行中的一个字段是我可以修改的日期，因此是日期选择器。每当我尝试修改任何日期时，大多数标签内容都会被隐藏，滚动条会被禁用。我无法找到导致问题的原因。

以下是我正在使用的代码。 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
      });
  })

Answer 1

最后，日期选择器与选项卡内部无关。他们刚刚与

发生碰撞

body {
  overflow-y: scroll;
}

式。我删除了那一位，并且日期选择器现在正确呈现。

角度材质：<md-tabs>内的<md-datepicker>无法正确渲染

1 个答案: