This repository was archived by the owner on Oct 2, 2019. It is now read-only.
This repository was archived by the owner on Oct 2, 2019. It is now read-only.
Multi Select with Long Values Doesn't Wrap if Bootstrap Theme is Applied #1377
Open
Description
The following code causes long selections to wrap beyond the boundary of the select:
<!DOCTYPE html>
<html lang="en" ng-app="demo">
<head>
<meta charset="utf-8">
<title>Multi Select with Long Values Doesn't Wrap if Bootstrap Theme is Applied Issue</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.13.2/select.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.13.2/select.min.css">
<script>
var app = angular.module('demo', ['ui.select']);
app.controller('DemoCtrl', function($scope, $http, $timeout) {
$scope.availableColors = ['Red', 'Turquoise extremely extremely extremely extremely extremely extremely extremely long text'];
$scope.multipleDemo = {};
$scope.multipleDemo.colors = ['Red', 'Turquoise extremely extremely extremely extremely extremely extremely extremely long text'];
});
</script>
</head>
<body ng-controller="DemoCtrl">
<ui-select multiple ng-model="multipleDemo.colors" theme="bootstrap" style="width: 300px;">
<ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
<ui-select-choices repeat="color in availableColors | filter:$select.search">
{{color}}
</ui-select-choices>
</ui-select>
</body>
</html>