make select2 multi-select not wrap to multiple lines

Question

Is there a way to make a multi-select not wrap when selecting enough values to do so? As an example, here's what it does:

What I want is for it to all be contained in one line and be accessible horizontally only. Select2 provides arrow key navigation as well as delete key usage so that isn't a big deal.

I figure this can probably be done with CSS but I'm struggling to figure out what needs to be done.

Tutelary

We're struggling too because we don't even know what your CSS + markup looks like. – Stemma

@Diodeus the picture I linked was from select2s example page. – Tutelary

Answer 1

One way is :

Fiddle: http://jsfiddle.net/EHzcc/735/

CSS:

.select2-choices{
    display:-webkit-inline-box;
}

UPDATE :

.select2-choices{
    display:-webkit-inline-box;
    max-width: 250px;   //  <--- set the max width you want
    //width: 250px;              or just force the width
}

UPDATE N : Play with direction maybe : http://jsfiddle.net/wEqLt/

---

UPDATE FOR NEWEST VERSION: Fiddle: http://jsfiddle.net/EHzcc/735/

CSS:

.select2-selection__choice{
    float: none !important;
    display: inline-block !important;
}

---

UPDATE FOR VERSION 4.1: Fiddle: http://jsfiddle.net/srg2deo5/

CSS:

.select2-selection{
  overflow-y:auto;
  white-space:nowrap;
}

ul.select2-selection__rendered{  
    white-space: nowrap;
}

Garald

I like this, but is there a way to constrain it to its current width while doing this? – Tutelary

I tried this, but it makes it difficult to select choices and maneuver the select box (ie, it doesn't insert the cursor at the end like I would expect). – Tutelary

is this some inherent shortcoming of select2, or is this just not possible? – Tutelary

that is close to usable. I'll play with it from there, but I think that's about as close as it'll get. Thanks. – Tutelary

I realize a long time has passed since this answer was posted. Nothing appears in the fiddle as far as I can tell. Is this still a solution? – Beniamino

@Beniamino Thanks for your reply, I've just updated the answer with link for newest version. – Garald

This doesn't work for the newest 4.1.0 version. – Inly

@JakubAdamec Here you go, Update for 4.1 – Garald

@BENARDPatrick works great, thanks! Although it'd be better with the ellipsis and not inline scrolling. – Inly

Answer 2

For those working with Bootstrap and the select2-bootstrap-5-theme, I found that the cursor to enter the next option in the <span class="select2-search select2-search--inline">...</span> would always wrap on to a second line, doubling the height as soon as an option was selected. In case anyone comes here looking for that problem, here's how I fixed it:

span.select2-selection.select2-selection--multiple {
  /* Display the choices and search input on one line, not wrapped */
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

ul.select2-selection__rendered {
  /* Don't wrap the choices on to separate horizontal rows */
  flex-wrap: nowrap !important;
}

span.select2-selection__choice__display {
  /* Don't wrap text within selected choices */
  white-space: nowrap !important;
}

Dorsal

This works well for me, although I found that the select box wouldn't wrap even when I wanted it to (ie, if there were enough selected items to require two lines). To address this, I removed the "flex-wrap: nowrap !important" from "ul.select2-selection__rendered", and replaced it with "flex-shrink: 0; flex-basis: 100%". YMMV. – Townsman

Answer 3

.select2-selection__choice {   
    /*float: left;*/ //remove float and add display: inline    
    display: inline;
}

Safekeeping

Answer 4

.select2-container--default .select2-selection--multiple, 
.select2-container--default .select2-selection--single,
.select2-selection .select2-selection--single{
   height:auto !important;
}

Christianechristiania

Please provide explanation on how this will solve the issue so it can be more useful to users stumbling upon it. – Pokpoke

Answer 5

Try this code :

.select2-selection__rendered {
    max-height: 80px;
    overflow-y: auto !important;
}

Centurion

Answer 6

.select2-selection__rendered {
white-space:normal!important;
}

Alterant

Welcome to Stack Overflow! While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Empoverish