Fixed width calculation

McFizh · Mar 24, 2016 · 46a493c · 46a493c
1 parent 713fa80
commit 46a493c
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 25 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -7,6 +7,7 @@
   </head>
   <body>
 
+	This is just a basic select with static data.<br/>
 	<select id="select1">
 		<option value="-1">option a</option>
 		<option value="1">option b</option>
@@ -20,33 +21,45 @@
 
 	<br/><br/>
 
-	<div style="width: 400px; border: 1px dashed black">
-	<select id="select2" style="width: 100%;">
-		<option value="-1">option a</option>
-		<option value="1">option b</option>
-		<option value="2" selected>option c</option>
-		<option value="3">option d</option>
-		<option value="4">option e</option>
-		<option value="5">option f</option>
-		<option value="6">option g</option>
-		<option value="7">option h</option>
-	</select>
-	</div>
+	This div is displayed after select component is created. This causes problems with jQuery outerWidth.<br/>
+	<br/>
+	<div id="havoc" style="width: 800px; border: 1px dashed black; display: none; padding: 5px;">
+
+	  This select doesn't have search<br/>
+	  <div style="width: 80%; display: inline-block;">
+		<select id="select2" style="width: 100%;">
+			<option value="-1">option a</option>
+			<option value="1">option b</option>
+			<option value="2" selected>option c</option>
+			<option value="3">option d</option>
+			<option value="4">option e</option>
+			<option value="5">option f</option>
+			<option value="6">option g</option>
+			<option value="7">option h</option>
+		</select>
+	  </div>
 
-	<br/><br/>
+	  <br/><br/>
+	  Data is loaded from file.json .. component doesn't respect '---' selection.<br/>
+	  <div style="width: 80%; display: inline-block;">
+		<select id="select3">
+			<option value="-1">---</option>
+		</select>
+	  </div>
 
-	<select id="select3">
-		<option value="-1">---</option>
-	</select>
+	</div>
 
-	<select id="select4">
-		<option value="-1">---</option>
+	<br/>
+	Data is loaded from file.json .. component respects selection.<br/>
+	<select id="select5" style="width: 340px;">
+		<option value="1">abc</option>
 	</select>
 
 	<br/><br/>
 
-	<select id="select5">
-		<option value="1">abc</option>
+	Note: This select is supposed to fail:<br/>
+	<select id="select4">
+		<option value="-1">---</option>
 	</select>
 
 	<script>
@@ -81,6 +94,8 @@
 		console.log($(this).val());
 	});
 
+	$("#havoc").show()
+
 	</script>
   </body>
 </html>
diff --git a/dist/js/tinyselect.min.js b/dist/js/tinyselect.min.js
diff --git a/js/tinyselect.js b/js/tinyselect.js
@@ -3,7 +3,7 @@
  *
  * Licensed under MIT license.
  *
- * @version 1.0.3
+ * @version 1.0.4
  * @author Pekka Harjamäki
  */
 ;(function($) {
@@ -53,7 +53,7 @@
 		// Create container for select, search and options
 		this.state.container = $("<div></div>").
 			addClass("tinyselect").
-			css({ width: $el.outerWidth() });
+			css({ width: $el.css("width") });
 
 		// Create the select element
 		this.state.selectBox = $("<div></div>").

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tinyselect",
   "description": "jQuery plugin to create custom select element. Supports ajax loading and filtering.",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "author": "Pekka Harjamäki <[email protected]>",
   "homepage": "http://mcfizh.github.io/tinySelect/",
   "license": "MIT",