Selectize reduces width of dropdown making options illegible

[whitsey]

I did:

• Search for if my issue has already been submitted
• Make sure I'm reporting something precise that needs to be fixed
• Give my issue a descriptive and concise title
• Create a minimal working example on JsFiddle or Codepen
  (or gave a link to a demo on the Selectize docs)
• Indicate precise steps to reproduce in numbers and the result,
  like below

When loading selectize select inside a table, the table automatically reduces the cell width to the miminum possible squeezing selectize. When you open dropdown, the options are illegible - the first 3-4 characters can be read and the rest are hidden.

Steps to reproduce:

1. Create a table with 20 columns
2. Add a select to the header of a few columns with a few values
3. View the dropdown options after selectize applied

Fiddle: https://jsfiddle.net/csjqaf3m/

Expected result:

Actual result:

These columns cannot have fixed widths because the data loaded into the varies - Just need the dropdown to be set to the width of its content

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days

[vanboom]

My PR #1814 implements a simple minWidth option that will allow the dropdown to flow wider than the parent control. Hoping the maintainers will consider it for a simple easy upgrade to the control.

[whitsey]

That doesn't really help because each dropdown is different in width - setting a minWidth is no different than just hardcoding a width on each element.

It is ugly but I ended up using JavaScript to find the length of the longest item in the dropdown.

optionLength = (cellData.length>optionLength?cellData.length:optionLength);

and then, created a spacer using dashes with the length each side as a buffer.

var spacer = "-".repeat(optionLength/1.5); select.prepend('<option value="">'+spacer+' All '+spacer+'</option>');

Not the most elegant solution but the best I could come up with for this inflexible framework.