<!DOCTYPE html>
<html ng-app="asideApp">
<head>
<link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="jquery@3.2.1" data-semver="3.2.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script data-require="angular-bootstrap@2.5.0" data-semver="2.5.0" src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div id="content">
<div class="jumbotron panel panel-default" ng-controller="TeamCtrl">
<h3>Veritcal scrollbar selectable in this drop-down</h3>
<p>
Type any letter in the input field. When the list appears one can select
the scrollbar and move up and down the list.
</p>
<ng-include src="'teamMembers.html'"></ng-include>
</div>
<div ng-controller="MainCtrl" ng-class="asideState.position">
<h3>Demo</h3>
<p>
<span>
<button type="button" class="btn btn-default btn-lg" ng-click="openAside('right', false)">
Click to open Uib-Typeahead<br/>in slide-in panel modal
</button>
</span>
</p>
<div class="clearfix"></div>
<br />
</div>
</div>
</body>
</html>
angular.module('asideApp', ['ui.bootstrap'])
.controller('MainCtrl', function($scope, $uibModal) {
$scope.openAside = function(position, backdrop) {
var myModal = $uibModal.open({
templateUrl: 'aside.html',
size: 'sm',
backdrop: backdrop,
controller: function($scope, $uibModalInstance) {
$scope.ok = function(e) {
$uibModalInstance.close();
e.stopPropagation();
};
$scope.cancel = function(e) {
$uibModalInstance.dismiss();
e.stopPropagation();
};
}
});
}
})
.controller('TeamCtrl', function($scope) {
$scope.message="Field Ticket Modal Test";
$scope.selectedName="";
$scope.names=["Robert","Donny","Harry","Yudha","Wendy","Mark","Kevin","Allan","Dmitry","Jameel","Fengying","Wing","Ian","Derek"];
});
/* Styles go here */
body {
padding: 30px 15px 0;
}
/* content slide animation */
/*
.modal-open #content {
-webkit-transition:all .2s, -webkit-transform .2s;
transition:all .2s ease-out, -webkit-transform .2s
}
.modal-open.left #content {
transform: translate(320px, 0);
}
*/
.ng-aside .modal-content {
min-width: 320px;
}
/* Overridden bootstrap CSS from our appplication. */
.dropdown-menu {
max-height: 200px;
overflow-y: auto;
}
My project is using a uib-typeahead in our application. We've encountered an odd
behaviour with the typeahead. Normally when the drop-down list appears and the contents
of the list is greater than the viewport of the list, a scrollbar appears and it can be
selected by the user. However, if the a uib-typeahead is included in a UibModal the scrollbar
cannot be selected, the act of selecting the scrollbar dismisses the list and selects
the element at the vertical position of the mouse. We would like to be able to
select the scrollbar within the modal just as we can without the modal.
<div class="modal-body" ng-controller="TeamCtrl">
<h3>Veritcal scrollbar not selectable within a modal</h3>
<p>
Type any letter in the input field. When the list appears attempting to
select the scrollbar will dismiss the drop-down list and select the name
at the position of the mouse.
</p>
<ng-include src="'teamMembers.html'"></ng-include>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok($event)">OK</button>
<button class="btn btn-warning" ng-click="cancel($event)">Cancel</button>
</div>
<label>Team member:</label>
<input type="text"
ng-model="selectedName"
uib-typeahead="name for name in names"
typeahead-select-on-blur="true" />