search

berkanakyurek / select2-bootstrap4-theme

A theme for Select2 v4 and Bootstrap 4
https://berkan52.github.io/select2-bootstrap4-theme/
MIT License
91 stars 41 forks source link

Multiple select2 option height #12

Open gotexis opened 6 years ago

gotexis commented 6 years ago

image

gotexis commented 6 years ago

Had to fix the margin below "margin: -0.25rem" to something like "0.25rem"

} .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice { color: #495057; background: transparent; border: 1px solid #343a40; border-radius: 0.25rem; cursor: default; float: left; margin: -0.25rem 0 0 0.1875rem; padding: 0 0.75rem; }

flaushi commented 5 years ago

Yes, I can confirm the problem. It is actually a bug in select2-bootstrap4.scss line 368:

.select2-selection__choice {
      color: $s2bs-input-color;
      background: $s2bs-btn-default-bg;
      border: $s2bs-input-border-width solid $s2bs-btn-default-border;
      @include border-radius($s2bs-selection-choice-border-radius);
      cursor: default;
      float: left;
      margin: ($s2bs-padding-base-vertical - 1) 0 0 $s2bs-padding-base-horizontal/2;
      padding: 0 $s2bs-padding-base-vertical; //<------
    }

Zero is wrong here. Fix:

@import "~select2-bootstrap4-theme/src/select2-bootstrap4";
.select2-container--bootstrap4 {
    .select2-selection--multiple {

        .select2-selection__choice {
            padding: $s2bs-padding-base-horizontal $s2bs-padding-base-vertical;
        }
    }
}