stop multi-select from wrapping to next line?

[krystyna93]

Hi, Is it possible to make the selections remain on one line without having them wrapping when they hit the end of the initial select box size? I don't like the way it makes the box grow in size...

[chandru89new]

Late to the party but what the heck.

There are a few complications to this.

I tried a few things and this is what happened. All of these are css-based hacks:

Tried to add white-space: nowrap; on the fstElement and fstControls. Had to remove float: left on fstChoiceItem for the white-space hack to take effect. This almost solved the issue but you couldn't effectively see what's beyond the width of the input box. Text/tags got cut off and there was no way for user to see those.

Other ideas seemed to pose more complications. But mostly, the inability to scroll on the x- was a problem.

Ultimately, I hacked my way around to having something where the input box doesn't grow in size but there's a y-scroll (via overflow-y: scroll) on the fstControls element. (SASS hack below)

.fstElement
  border-radius: 5px
  .fstControls
    overflow-y: scroll
    max-height: $fontSize*3
  .fstChoiceItem
    border: none