Fix for .form-control style conflicts (selectize#83).

Author: brianreavis

Gruntfile.js

@@ -8,9 +8,13 @@ module.exports = function(grunt) {
 	grunt.loadNpmTasks('grunt-contrib-copy');
 	grunt.loadNpmTasks('grunt-replace');
 	grunt.loadNpmTasks('grunt-recess');
-	grunt.registerTask('default', [
+
+	grunt.registerTask('configure', [
 		'clean:pre',
 		'bower:install',
+	]);
+
+	grunt.registerTask('compile', [
 		'copy:less',
 		'copy:less_plugins',
 		'concat:less_theme_dependencies',
@@ -24,6 +28,11 @@ module.exports = function(grunt) {
 		'clean:post',
 	]);
 
+	grunt.registerTask('default', [
+		'configure',
+		'compile'
+	]);
+
 	grunt.registerTask('clean_bootstrap2_css', 'Cleans CSS rules ocurring before the header comment.', function() {
 		var file = 'dist/css/selectize.bootstrap2.css';
 		var source = fs.readFileSync(file, 'utf8');

dist/css/selectize.bootstrap2.css

@@ -246,7 +246,7 @@
 .selectize-dropdown {
   position: absolute;
   z-index: 2;
-  margin-top: -1px;
+  margin: -1px 0 0 0;
   background: #ffffff;
   border: 1px solid #d0d0d0;
   border-top: 0 none;

dist/css/selectize.bootstrap3.css

@@ -246,7 +246,7 @@
 .selectize-dropdown {
   position: absolute;
   z-index: 2;
-  margin-top: -1px;
+  margin: -1px 0 0 0;
   background: #ffffff;
   border: 1px solid #cccccc;
   border-top: 0 none;
@@ -341,12 +341,18 @@
   opacity: 0.5;
 }
 
-.selectize-dropdown {
+.selectize-dropdown,
+.selectize-dropdown.form-control {
   z-index: 1000;
+  height: auto;
+  padding: 0;
   margin: 2px 0 0 0;
+  background: #ffffff;
   border: 1px solid #cccccc;
   border: 1px solid rgba(0, 0, 0, 0.15);
-  border-radius: 4px;
+  -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
   -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
           box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 }
@@ -409,4 +415,16 @@
   -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
           border-radius: 3px;
+}
+
+.form-control.selectize-control {
+  height: auto;
+  padding: 0;
+  background: none;
+  border: none;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }

dist/css/selectize.css

@@ -246,7 +246,7 @@
 .selectize-dropdown {
   position: absolute;
   z-index: 2;
-  margin-top: -1px;
+  margin: -1px 0 0 0;
   background: #ffffff;
   border: 1px solid #d0d0d0;
   border-top: 0 none;

dist/css/selectize.default.css

@@ -246,7 +246,7 @@
 .selectize-dropdown {
   position: absolute;
   z-index: 2;
-  margin-top: -1px;
+  margin: -1px 0 0 0;
   background: #ffffff;
   border: 1px solid #d0d0d0;
   border-top: 0 none;

dist/css/selectize.legacy.css

@@ -246,7 +246,7 @@
 .selectize-dropdown {
   position: absolute;
   z-index: 2;
-  margin-top: -1px;
+  margin: -1px 0 0 0;
   background: #ffffff;
   border: 1px solid #d0d0d0;
   border-top: 0 none;

dist/less/selectize.bootstrap3.less

@@ -59,14 +59,19 @@
 @selectize-arrow-color: @dropdown-caret-color;
 @selectize-arrow-offset: @selectize-padding-x + 5px;
 
-.selectize-dropdown {
+.selectize-dropdown, .selectize-dropdown.form-control {
+	height: auto;
+	padding: 0;
 	margin: 2px 0 0 0;
 	z-index: @zindex-dropdown;
+	background: @selectize-color-dropdown;
 	border: 1px solid @dropdown-fallback-border;
 	border: 1px solid @dropdown-border;
-	border-radius: @border-radius-base;
-	.box-shadow(0 6px 12px rgba(0,0,0,.175));
+	.selectize-border-radius(@border-radius-base);
+	.selectize-box-shadow(0 6px 12px rgba(0,0,0,.175));
+}
 
+.selectize-dropdown {
 	.optgroup-header {
 		font-size: @font-size-small;
 		line-height: @line-height-base;
@@ -105,7 +110,7 @@
 		@color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
 		border-color: @color;
 		outline: 0;
-		.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
+		.selectize-box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
 	}
 }
 
@@ -119,4 +124,13 @@
 			.selectize-border-radius(@selectize-border-radius - 1px);
 		}
 	}
+}
+
+.form-control.selectize-control {
+	padding: 0;
+	height: auto;
+	border: none;
+	background: none;
+	.selectize-box-shadow(none);
+	.selectize-border-radius(0);
 }

dist/less/selectize.less

@@ -206,7 +206,7 @@
 	z-index: 2;
 	border: @selectize-border;
 	background: @selectize-color-dropdown;
-	margin-top: -1px;
+	margin: -1px 0 0 0;
 	border-top: 0 none;
 	.selectize-box-sizing(border-box);
 	.selectize-box-shadow(0 1px 3px rgba(0,0,0,0.1));

src/less/selectize.bootstrap3.less

@@ -59,14 +59,19 @@
 @selectize-arrow-color: @dropdown-caret-color;
 @selectize-arrow-offset: @selectize-padding-x + 5px;
 
-.selectize-dropdown {
+.selectize-dropdown, .selectize-dropdown.form-control {
+	height: auto;
+	padding: 0;
 	margin: 2px 0 0 0;
 	z-index: @zindex-dropdown;
+	background: @selectize-color-dropdown;
 	border: 1px solid @dropdown-fallback-border;
 	border: 1px solid @dropdown-border;
-	border-radius: @border-radius-base;
-	.box-shadow(0 6px 12px rgba(0,0,0,.175));
+	.selectize-border-radius(@border-radius-base);
+	.selectize-box-shadow(0 6px 12px rgba(0,0,0,.175));
+}
 
+.selectize-dropdown {
 	.optgroup-header {
 		font-size: @font-size-small;
 		line-height: @line-height-base;
@@ -105,7 +110,7 @@
 		@color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
 		border-color: @color;
 		outline: 0;
-		.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
+		.selectize-box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
 	}
 }
 
@@ -119,4 +124,13 @@
 			.selectize-border-radius(@selectize-border-radius - 1px);
 		}
 	}
+}
+
+.form-control.selectize-control {
+	padding: 0;
+	height: auto;
+	border: none;
+	background: none;
+	.selectize-box-shadow(none);
+	.selectize-border-radius(0);
 }

src/less/selectize.less

@@ -201,7 +201,7 @@
 	z-index: 2;
 	border: @selectize-border;
 	background: @selectize-color-dropdown;
-	margin-top: -1px;
+	margin: -1px 0 0 0;
 	border-top: 0 none;
 	.selectize-box-sizing(border-box);
 	.selectize-box-shadow(0 1px 3px rgba(0,0,0,0.1));