Added max-width attribute

- This defines the max width of the drop down button in pixels. Ellipsis is used if text is cut off. Also added the title attribute with the complete content of the currently selected item

Author: Sebastian Hammerl

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2014 Sebastian Hammerl, Getslash GmbH
+Copyright (c) 2015 Sebastian Hammerl, Getslash GmbH
 Copyright (c) 2014 Amitava Saha
 
 Permission is hereby granted, free of charge, to any person obtaining a copy

README.md

@@ -26,7 +26,8 @@ Add "ui.multiselect" to your modules list. Then you can use it like follows:
     data-multiple="true"                  // true for multi-select mode
     data-compare-by="id"                  // set key to compare objects, otherwise is has to be equal to options
     scroll-after-rows="5"                 // Show scroll bar after 5 rows
-    filter-after-rows="5">                // Show filter input after 5 rows
+    filter-after-rows="5                  // Show filter input after 5 rows
+    max-width="100">                      // The maximum width of the multiselect dropdown button
 </multiselect>
 ```
 
@@ -46,7 +47,7 @@ $ karma start
 
 ### License
 
-Copyright (c) 2014 Sebastian Hammerl, Getslash GmbH
+Copyright (c) 2015 Sebastian Hammerl, Getslash GmbH
 
 Copyright (c) 2014 Amitava Saha
 

angular-bootstrap-multiselect.js

@@ -34,6 +34,7 @@ angular.module("ui.multiselect", ["multiselect.tpl.html"])
 				var isMultiple = attrs.multiple ? true : false;
 				var compareByKey = attrs.compareBy;
 				var scrollAfterRows = attrs.scrollAfterRows;
+				var maxWidth = attrs.maxWidth;
 				var required = false;
 				var scope = originalScope.$new();
 				scope.filterAfterRows = attrs.filterAfterRows;
@@ -48,6 +49,9 @@ angular.module("ui.multiselect", ["multiselect.tpl.html"])
 				if(scrollAfterRows !== undefined && parseInt(scrollAfterRows).toString() === scrollAfterRows) {
 					scope.ulStyle = {"max-height": (scrollAfterRows*26+14)+"px", "overflow-y": "auto", "overflow-x": "hidden"};
 				}
+				if(maxWidth !== undefined && parseInt(maxWidth).toString() === maxWidth) {
+					scope.maxWidth = {"max-width": maxWidth + "px"};
+				}
 
 				originalScope.$on("$destroy", function() {
 					scope.$destroy();
@@ -309,8 +313,8 @@ angular.module("ui.multiselect", ["multiselect.tpl.html"])
 angular.module("multiselect.tpl.html", []).run(["$templateCache", function($templateCache) {
 	$templateCache.put("multiselect.tpl.html",
 			"<div class=\"btn-group\">\n" +
-			"  <button type=\"button\" class=\"btn btn-default dropdown-toggle\" ng-click=\"toggleSelect()\" ng-disabled=\"disabled\" ng-class=\"{'error': !valid()}\">\n" +
-			"    {{header}} <span class=\"caret\"></span>\n" +
+			"  <button title=\"{{header}}\" type=\"button\" class=\"btn btn-default dropdown-toggle\" ng-click=\"toggleSelect()\" ng-disabled=\"disabled\" ng-class=\"{'error': !valid()}\">\n" +
+			"    <div ng-style=\"maxWidth\" style=\"padding-right: 13px; overflow: hidden; text-overflow: ellipsis;\">{{header}}</div><span class=\"caret\" style=\"position:absolute;right:10px;top:14px;\"></span>\n" +
 			"  </button>\n" +
 			"  <ul class=\"dropdown-menu\" style=\"margin-bottom:30px;padding-left:5px;padding-right:5px;\" ng-style=\"ulStyle\">\n" +
 			"    <input ng-show=\"items.length > filterAfterRows\" ng-model=\"filter\" style=\"padding: 0px 3px;margin-right: 15px; margin-bottom: 4px;\" placeholder=\"Type to filter options\">" +

app.js

@@ -14,6 +14,7 @@ angular.module("angular-bootstrap-multiselect-test", ["ui.multiselect"]).control
 			name: "Apples",
 			bla: "blubb"
 		},
+		"",
 		""
 	];
 	$scope.multiselectModel = [
@@ -80,4 +81,11 @@ angular.module("angular-bootstrap-multiselect-test", ["ui.multiselect"]).control
 			name: "Peaches"
 		}
 	];
+	$scope.selectOptionsLongEntries = [
+		"ThisIsATestWithVeryLongEntries11111",
+		"ThisIsATestWithVeryLongEntries22222",
+		"ThisIsATestWithVeryLongEntries33333",
+		"ThisIsATestWithVeryLongEntries44444",
+		"ThisIsATestWithVeryLongEntries55555",
+	];
 });

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-bootstrap-multiselect",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "authors": [
     "Sebastian Hammerl, Getslash GmbH",
     "Amitava Saha"

index.html

@@ -100,6 +100,19 @@ <h3>Single select Long List, scroll after 5 rows, filter after 5 rows</h3>
 &gt;&lt;/multiselect&gt</pre>
         <br>
 
+        <h3>Single select, very long entries</h3>
+        <multiselect ng-model="singleselectModel[6]" options="c for c in selectOptionsLongEntries" data-multiple="false" max-width="100"></multiselect>
+        <br><br>
+        Model: {{singleselectModel[6]}}
+        <br><br>
+		<pre>&lt;multiselect
+    ng-model="singleselectModel[6]"
+    options="c for c in selectOptionsLongEntries"
+    data-multiple="false"
+    max-width="100"
+&gt;&lt;/multiselect&gt</pre>
+        <br>
+
 
 
 		<h3>Multi select</h3>
@@ -179,6 +192,7 @@ <h3>app.js:</h3>
             name: "Apples",
             bla: "blubb"
         },
+        "",
         ""
     ];
     $scope.multiselectModel = [
@@ -245,6 +259,13 @@ <h3>app.js:</h3>
             name: "Peaches"
         }
     ];
+    $scope.selectOptionsLongEntries = [
+        "ThisIsATestWithVeryLongEntries11111",
+        "ThisIsATestWithVeryLongEntries22222",
+        "ThisIsATestWithVeryLongEntries33333",
+        "ThisIsATestWithVeryLongEntries44444",
+        "ThisIsATestWithVeryLongEntries55555",
+    ];
 });
 </pre>
 

karma.conf.js

@@ -3,7 +3,7 @@
 
 module.exports = function(config) {
 	config.set({
-		basePath     : '',
+		basePath     : "",
 		frameworks   : ["ng-scenario"],
 		files        : [
 			"angular-bootstrap-multiselect.js",
@@ -13,7 +13,7 @@ module.exports = function(config) {
 		],
 		exclude      : [],
 		preprocessors: {},
-		reporters    : ['progress'],
+		reporters    : ["progress"],
 		port         : 8001,
 		colors       : true,
 		logLevel     : config.LOG_INFO,