ttskch / select2-bootstrap4-theme

Select2 v4 theme for Bootstrap4
MIT License
434 stars 207 forks source link

Invalid layout on multiple select and input-group #72

Open laurentmuller opened 2 years ago

laurentmuller commented 2 years ago

When using select2 with multi select, input-group and the total length of items is smaller than the form group, the prepend and append groups are aligned correctly:

layout_valid

But if more items are added, the prepend and append groups move to a new line:

layout_invalid

rafael-perini commented 2 years ago

I've added this SCSS as a workaround and a flex-nowrap with input-group class.

.input-group > .select2-container--bootstrap4 {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;

  .select2-selection--single,
  .select2-selection--multiple {
    height: 100%;
    line-height: inherit;
    padding: 0.5rem 1rem;

    .select2-selection__choice {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 100%;
    }
  }
}
arcanisgk commented 2 years ago

@rafael-perini it is in the final version???

rafael-perini commented 2 years ago

I don't have access to the project I was working on @arcanisgk, but I don't think it is anymore. Yet, I'm not sure if the issue was fixed.