Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Selectize dropdown width independent of input

I am trying to use Selectize to render a dropdown of very long labels. The text can be pretty wide, but the input has a constraint on width. Selectize perfectly wraps the text (in both the input and drop downs) but ideally the drop down would be able to scale wider than the input to allow better readability. Is it possible to get Selectize to have a dropdown width independent of the input?

<select style="width:300px" multiple>
<option value="">Enter some tags...</option>
<option value="1" selected>QID7_4 : Where do you store your digital photos? Check all that apply.-On a cloud service like iCloud, Dropbox, Google Drive, or Amazon Cloud</option>
<option value="2">QID5_2 : What do you take pictures of most often? Please rank the following / by drag and drop.-Friends and social activities</option>
<option value="3">QID13_5 : How important is it to you that your photos are organized in the / following ways?-By quality (including favorites)</option>

Current look:

enter image description here

Desired look: enter image description here

The idea is the text is much more readable if the dropdown expands to wrap less.

Example jsFiddle

like image 830
rapidninja Avatar asked Aug 21 '15 20:08

rapidninja


2 Answers

When the dropdown should change it's width dynamically to the largest option:

.selectize-dropdown {
  width: auto !important;
}

.selectize-dropdown [data-selectable], .selectize-dropdown .optgroup-header {
   white-space: nowrap;
}
like image 120
Pieter Avatar answered Oct 03 '22 17:10

Pieter


The widths of each label are set dynamically through JS. To overwrite that how about doing something like this:

.selectize-dropdown {
    width: 600px !important;
}

Fiddle

like image 33
Robin Carlo Catacutan Avatar answered Oct 03 '22 16:10

Robin Carlo Catacutan