当前位置: 动力学知识库 > 问答 > 编程问答 >

css - Angular-material's tabs and ui-bootstrap's datepicker conflict

问题描述:

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 a demo in jsFiddle

Here's my code:

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

});

<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&nbsp;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.

网友答案:

You'll want to have the dropdown datepicker appear as part of the regular document flow, that way it will occupy space and the tab picker will automatically make room for it. It doesn't do that currently because it uses .dropdown-menu, to which Bootstrap adds position: absolute;

Just override like this:

.dropdown-menu[datepicker-popup-wrap] {
    position: static;
}

There are some other stylistic things you can do, but that is the basic principle.

Demo in jsFiddle

分享给朋友:
您可能感兴趣的文章:
随机阅读: