'make select2 multi-select not wrap to multiple lines

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:

enter image description here

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.

cssjquery-select2


Solution 1:[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;
}

Solution 2:[2]

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

Solution 3:[3]

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

Solution 4:[4]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Bart
Solution 3 Mr.Faisal
Solution 4 Syam S

Related Questions