Seiyria Seiyria - 6 months ago 67
CSS Question

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.

Answer

One way is :

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

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/

Comments