Fixed the width of select2

I am using select2 for selecting a candidate skill.
I don't want to change my select box width, I want Fixed width for my slelet2

select2

What have I Tried So far?

//HTML
<select class="skill_select_id" name="skill_select_id">
<?php foreach ( $skills as $skill ) ?>
<option value="<?= $skill['id'] ?>" ><?= $skill['name'] ?></option>
<?php ?>
</select>


First I use resolve

resolve

//Script
$('.skill_select_id').select2(tags:true, width: 'resolve');


I have also tried element, 100% option in width

element

100%

width

//Another Try
$('.skill_select_id').select2(tags:true, width: 'element');


But it didn't help me to set a Fixed width of select2.

I don't want to add inline CSS to solve this problem because if I use the plugin then it must have some solution for this type of problems.

inline CSS

1 Answer
1

To fix my dropdown width, setting it to 'element' on select2 initialization worked fine for me:

$("#dropDown").select2( width: 'element' );


Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy