Fix style bootstrap 4/5 | Add property setting | Fix calcul dropdown height (#1892)

* fix: style dropdown bootstrap4/5

* fix: appareance with input-group class

* feat: add ignoreOnDropdownHeight property

* fix: calcul dropdownheight with optgroup

* fix: style for input-group class

* fix: add separator height to dropdown height calcul

Author: fabienwnklr

src/defaults.js

@@ -59,6 +59,7 @@ Selectize.defaults = {
     sizeValue: 'auto', // number of items or height value (px is default) or CSS height (px, rem, em, vh)
   },
   normalize: false,
+  ignoreOnDropwdownHeight: 'img, i',
 	/*
 	load                 : null, // function(query, callback) { ... }
 	score                : null, // function(search) { ... }

src/scss/selectize.bootstrap4.scss

@@ -167,7 +167,33 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
   border-radius: 0;
 }
 
-.input-group .#{$selectize}-input {
-  overflow: unset;
-  border-radius: 0 $select-border-radius $select-border-radius 0;
+.input-group .#{$selectize}-control:not(:last-child) {
+  .#{$selectize}-input{
+    overflow: unset;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+.input-group .#{$selectize}-control:not(:first-child) {
+  .#{$selectize}-input{
+    overflow: unset;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
+// .input-group .#{$selectize}-input {
+//   overflow: unset;
+//   border-radius: 0 $select-border-radius $select-border-radius 0;
+// }
+
+.#{selectize}-dropdown.plugin-auto_position.#{$selectize}-position-top {
+  border-top: $select-border!important;
+  border-bottom: $select-border!important;
+  border-radius: $select-border-radius!important;
+}
+.#{selectize}-control.plugin-auto_position .#{selectize}-input.#{$selectize}-position-top.dropdown-active {
+  border-radius: $select-border-radius!important;
+  border-top: $select-border!important;
 }

src/scss/selectize.bootstrap5.scss

@@ -167,17 +167,39 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
   border-radius: 0;
 }
 
-.input-group .#{$selectize}-input {
-  overflow: unset;
-  border-radius: 0 $select-border-radius $select-border-radius 0;
+.input-group>.input-group-append>.btn, .input-group>.form-control:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.input-group>.input-group-prepend>.btn {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+
+.input-group .#{$selectize}-control:not(:last-child) {
+  .#{$selectize}-input{
+    overflow: unset;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+.input-group .#{$selectize}-control:not(:first-child) {
+  .#{$selectize}-input{
+    overflow: unset;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
 }
 
 .#{selectize}-dropdown.plugin-auto_position.#{$selectize}-position-top {
-  border-top: $select-border;
-  border-bottom: $select-border;
-  border-radius: $select-border-radius;
+  border-top: $select-border!important;
+  border-bottom: $select-border!important;
+  border-radius: $select-border-radius!important;
 }
 .#{selectize}-control.plugin-auto_position .#{selectize}-input.#{$selectize}-position-top.dropdown-active {
-  border-radius: $select-border-radius;
-  border-top: $select-border;
+  border-radius: $select-border-radius!important;
+  border-top: $select-border!important;
 }

src/selectize.js

@@ -1967,26 +1967,42 @@ $.extend(Selectize.prototype, {
 
       if (this.settings.dropdownSize.sizeType === 'numberItems') {
         // retrieve all items (included optgroup but exept the container .optgroup)
-        var $items = this.$dropdown_content.find('*').not('.optgroup, .highlight');
+        var $items = this.$dropdown_content.find('*').not('.optgroup, .highlight').not(this.settings.ignoreOnDropwdownHeight);
         var totalHeight = 0;
+        var marginTop = 0;
+        var marginBottom = 0;
+        var separatorHeight = 0;
 
 
         for (var i = 0; i < height; i++) {
           var $item = $($items[i]);
 
-          if ($item.length === 0) break;
+          if ($item.length === 0) {
+            break;
+          }
 
-          totalHeight += $($items[i]).outerHeight(true);
+          totalHeight += $item.outerHeight(true);
           // If not selectable, it's an optgroup so we "ignore" for count items
-          if (typeof $item.data('selectable') == 'undefined') height++;
+          if (typeof $item.data('selectable') == 'undefined') {
+            if ($item.hasClass('optgroup-header')) {
+              var styles = window.getComputedStyle($item.parent()[0], ':before');
+
+              if (styles) {
+                marginTop = styles.marginTop ? Number(styles.marginTop.replace(/\W*(\w)\w*/g, '$1')) : 0;
+                marginBottom = styles.marginBottom ? Number(styles.marginBottom.replace(/\W*(\w)\w*/g, '$1')) : 0;
+                separatorHeight = styles.borderTopWidth ? Number(styles.borderTopWidth.replace(/\W*(\w)\w*/g, '$1')) : 0;
+              }
+            }
+            height++;
+          }
 
         }
 
         // Get padding top for add to global height
         var paddingTop = this.$dropdown_content.css('padding-top') ? Number(this.$dropdown_content.css('padding-top').replace(/\W*(\w)\w*/g, '$1')) : 0;
         var paddingBottom = this.$dropdown_content.css('padding-bottom') ? Number(this.$dropdown_content.css('padding-bottom').replace(/\W*(\w)\w*/g, '$1')) : 0;
 
-        height = (totalHeight + paddingTop + paddingBottom) + 'px';
+        height = (totalHeight + paddingTop + paddingBottom + marginTop + marginBottom + separatorHeight) + 'px';
       } else if (this.settings.dropdownSize.sizeType !== 'fixedHeight') {
         console.warn('Selectize.js - Value of "sizeType" must be "fixedHeight" or "numberItems');
         return;