Choosing the width of the drop-down list regardless of the input

I am trying to use Selectize to render a drop down list of very long labels. The text can be quite wide, but the input has a width limit. Selectize perfectly wraps text (both in the input and in the drop-down list), but ideally, the drop-down value can scale wider than the input to provide better readability. Is it possible to select Selectize to have the width of the drop-down list regardless 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 view:

enter image description here

Desired view: enter image description here

The idea is that the text is much more readable if the drop-down menu expands to wrap less.

JsFiddle example

+8
javascript jquery
source share
4 answers

The widths of each label are set dynamically through JS. To rewrite this, how to do something like this:

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

Fiddle

+15
source share

When the drop-down list should dynamically change the width to the largest parameter:

 .selectize-dropdown { width: auto !important; } .selectize-dropdown [data-selectable], .selectize-dropdown .optgroup-header { white-space: nowrap; } 
+5
source share

Robin's answer did not help me. However, the following.

 .selectize-input { min-width: 600px !important; } 
+3
source share
 .selectize-control { width: 90% !important; } 

This will allow you to be responsive.

0
source share

All Articles