Style of width:auto does not allow the select2 to expand when in a modal...

[joetidee]

I have added the folliwing to my Select2 component:

<Select2
    ...
    style={{width:'auto'}}
    ...
/>

This component is rendered as part of a bootstrap modal dialog. The contents of the dropdow list do not force it to expand fully.

If I use this width:auto on a component that is NOT in a modal dialog, it worls ok. Any ideas why this does not work in a modal?

[rkit]

I don't even know… Maybe this help you:
select2/select2#3101 ( dropdownAutoWidth )

[gazpachu]

@rkit How does the dynamic width work? I've been trying different approaches to make it responsive, but the <input> always end up defining the final width of the whole thing.

[rkit]

@gazpachu I don't know. I never faced such a problem, sorry

[gazpachu]

@rkit This is what I mean (see below). It seems they get random widths:

[rkit]

@gazpachu I guess you should play with css, style={{width: x'}} and option dropdownAutoWidth

[gazpachu]

@rkit setting the dropdownAutoWidth option to true or false doesn't seem to change anything. It doesn't matter if I add a style={{width: x'}} cause it gets overwritten with the fixed px width value set by the component.

[rkit]

@gazpachu Maybe it is better to create an issue in Select2? This component doesn't add any CSS styles.