Skip to content

Invalid layout on multiple select and input-group #72

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
laurentmuller opened this issue Aug 17, 2021 · 3 comments
Open

Invalid layout on multiple select and input-group #72

laurentmuller opened this issue Aug 17, 2021 · 3 comments

Comments

@laurentmuller
Copy link

laurentmuller commented Aug 17, 2021

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
Copy link

rafael-perini commented Sep 6, 2021

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
Copy link

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

@rafael-perini
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants