angular-ui-bootstrap datepicker hide in jQuery UI dialog
Question
I have some unexpected behavior when a UI Bootstrap datepicker is inside a jQueryUI dialog. When the calendar button is clicked, the datepicker is shown inside the dialog, but the dialog does not resize, so the datepicker is mostly hidden inside it, and you have to use scroll bars on the dialog to see it all.
Is it possible to pull the datepicker over the dialog?
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.min.js"></script>
<script>
$(function() {
$("#dialog").dialog({
resizable: false
});
});
angular.module('app', ['ui.bootstrap'])
.controller('ctrl', function(){})
</script>
<style>
.glyphicon { font-size: 20px !important; }
</style>
</head>
<body ng-app="app" ng-controller="ctrl">
<div id="dialog" title="Basic dialog">
<div class="input-group">
<input type="text" class="form-control" uib-datepicker-popup
ng-model="date" is-open="open">
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open = true">
<span class="glyphicon glyphicon-calendar"></span>
</button>
</span>
</div>
</div>
</body>
Does someone know how to fix that?
1 answers
solution1
0 2016-05-19 17:41:23
Even though I'm not a big fan of using watchers in angular, this seems like a good use for one. You could put a watch on the $scope variable 'open' and resize the dialog accordingly. The controller would look like this:
.controller('ctrl', function($scope) {
var originalHeight = 100;
var originalWidth = 250;
$scope.$watch('open', function() {
var newHeight = originalHeight;
var newWidth = originalWidth;
if ($scope.open) {
newHeight = newHeight * 4;
newWidth = newWidth * 1.5;
}
$("#dialog").dialog({
height: newHeight,
width: newWidth
});
});
});
You may want to get originalWidth and originalHeight from the #dialog element but for this example I simply hardcoded it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.