CODEWITHSUNDEEP
javascriptcssangularjsangular-material
Charlie
Charlie

Reputation: 664

Angular Material: <md-datepicker> inside <md-tabs> does not render properly

I am having an issue having a series of tabs, with lists of data and date pickers inside of them.

Here's a Codepen with the issue replicated.

Basically, I have a tab, inside the tab there is a table showing some data. One of the fields in every row is a date I can modify, hence the date picker. Whenever I try to modify any date, most of the tab content gets hidden and the scroll bar gets disabled. And I cannot find what is causing the problem.

Following is the code I am using. The 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>

The particular styles:

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;
}

And the 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
      });
  })

Upvotes: 0

Views: 583

Answers (1)

Charlie
Charlie

Reputation: 664

In the end, the date picker had nothing to do with being inside a tab. They were just colliding with the 

body {
  overflow-y: scroll;
}

style. I removed that bit and the date pickers are now rendering properly.

Upvotes: 1

Related Questions