I have a modal window with angular-material tabs and a ui-bootstrap datepicker. When I open datepicker, the text field moves up, and I cannot access either the datepicker or the field.
Here's my code:
<!-- language: lang-js -->var app = angular.module('myApp', ['ui.bootstrap', 'ngAnimate', 'ngAria', 'ngMaterial'])
.controller('myController', function ($scope, $modal) {
$scope.showModal = function () {
var modalInstance;
modalInstance = $modal.open({
templateUrl: "addNew.html",
controller: 'myController2',
size: 'lg'
});
};
$scope.showModal();
})
.controller('myController2', function ($scope, $modal) {
$scope.datepickers = {
start: false
}
$scope.openDatepicker = function ($event, which) {
$event.preventDefault();
$event.stopPropagation();
$scope.datepickers[which] = true;
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
$scope.dateFormat = 'mediumDate';
});
<!-- language: lang-html -->
<div ng-app="myApp">
<div ng-controller="myController">
<script type="text/ng-template" id="addNew.html">
<div class="modal-body">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Add</h3>
</div>
<div class="panel-body">
<md-tabs md-dynamic-height md-border-bottom>
<md-tab label="date">
<div class="form-horizontal">
<div class="row">
<div class="col-md-6">
<div class="row form-group">
<label for="dateStart" class="col-sm-2 col-md-4 control-label">
Date Start
</label>
<div class="col-sm-10 col-md-8">
<div class="input-group ui-datepicker">
<input type="text"
class="form-control"
name="dateStart"
id="dateStart"
datepicker-popup="{{dateFormat}}"
ng-model="campaign.dateStart"
is-open="datepickers.start"
datepicker-options="dateOptions"
ng-required="true"
ng-click="openDatepicker($event, 'start')"
close-text="Close"/>
<span class="input-group-addon" ng-click="openDatepicker($event, 'start')">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</md-tab>
<md-tab label="other tabs"></md-tab>
<md-tab label="other tabs"></md-tab>
<md-tab label="other tabs"></md-tab>
<md-tab label="other tabs"></md-tab>
</md-tabs>
</div>
</div>
</div>
</script>
</div>
</div>
I used a css trick to add the scroll bar in this fiddle, but it's not very neat. So I was wondering if there is a way to expand the tab height when the datepicker is opened or the datepicker is shown over a modal window like the select window opens.