Selectize dropdown width independent of input

Question

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:

Desired look:

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

Example jsFiddle

Dissonant

I do not get your question 100%? can you explain – Ultracentrifuge

Sorry for the confusion. Updated with images explaining current vs desired functionality – Dissonant

Answer 1

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

Beamon

Too easy! Thanks for the quick fix. – Dissonant

@Dissonant Great! Glad it helped. – Beamon

Thanks! What about min-width, just in case? – Coverley

@AlexanderSuraphel yes, min-width should work also. – Beamon

@RobinCarloCatacutan I just tried this and setting the width seems to have no effect... Am I missing something? – Coverley

@AlexanderSuraphel I think you can make another answer, as some people might found your answer more suitable for them than mine. – Beamon

@RobinCarloCatacutan okay. I just did that. – Coverley

Answer 2

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;
}

Euthanasia

Answer 3

Robin's Answer didn't work for me. However the following did.

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

Coverley

But that's not independent of input – Blanketing

You're right @Oleg. OP's intention is to make the dropdown "text is much more readable if the dropdown expands to wrap less." from my understanding, not to make it strictly have some specific width. – Coverley

Answer 4

.selectize-control {
  width: 90% !important;
}

This would allow you to have it be responsive.

Barye

Answer 5

You can make it adapt to the content and restrict maximum width by this:

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

Blacklist