select2 - Setting different width to input and dropdown

Question

I am using Select2 3.3.2

I have very very long options in the select. Example:

<select id="e1">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
<option value="WY">very long long long text</option>
<option value="WY">very long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long text</option>
</select>

The purpose is to avoid wrapping of the options when the dropdown opens up.

I would like to set long width for the dropdown when it opens up (for example - 800px, or even automatic evaluated width).

But to keep the input with short width when the dropdown is closed (for example 300px).

I followed this "Add option to set dropdown width" issue of select2.

But I couldn't get it to work, the width of the options/dropdown is the same as the input's width and the options as wrapped to multiple lines.

Here is the demo of my problem in jsfiddle - http://jsfiddle.net/ewwAX/

Thank you all in advance for helping.

Dave Amphlett · Accepted Answer · 2013-10-11 15:05:34Z

120

Select2 includes 'dropdownAutoWidth' parameter which uses javascript to attempt to be wide enough for the dropdown contents.

$('#whatever').select2({dropdownAutoWidth : true});

This at least works with Select2 3.4.3 - I don't know how much earlier it was introduced.

answered Oct 11, 2013 at 15:05

Dave Amphlett

2,0801 gold badge17 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Brett Over a year ago

Works in 4.0.2.

RDev Over a year ago

Works in 4.0.6-rc.1

Tim Bogdanov Over a year ago

does not work i 4.0.10

Ashique bzq Over a year ago

It works, but when I select a wider text, the input field also gets widen. So Add this too {dropdownAutoWidth : true, width: 'resolve'}

Yeronimo · Accepted Answer · 2019-06-17 07:25:56Z

71

The property you used is not for controlling the dropdown width. You can use the dropdownCssClass property.

Here's a demo in jsFiddle.

JavaScript:

$(document).ready(function() { 
    $("#e1").select2({dropdownCssClass : 'bigdrop'}); 
});

CSS:

.bigdrop {
    width: 600px !important;
}

Please note that for more recent versions there is now a better solution! See Dave Amphlett's answer

edited Jun 17, 2019 at 7:25

answered May 13, 2013 at 10:28

Yeronimo

1,75915 silver badges29 bronze badges

4 Comments

N.K Over a year ago

Hi, Can You please help me too , I want that the Drop down should be wide as its there in your fiddle, but once selected it should be back to its normal width no matter how wide the date is

w00ngy Over a year ago

@N.K -- See Dave Amphlett's answer below. This works for me.

roberkules Over a year ago

@N.K if you change the jsfiddle to use a css class (instead of an id) the width property would be used (for the closed state)

MC9000 Over a year ago

no worky here -select2.min.js:1 Uncaught Error: No select2/compat/dropdownCss Is there no way possible to set the width in the latest version? This is driving me bonkers

Asheeka K P · Accepted Answer · 2018-11-07 06:16:46Z

15

$("#e1").select2({ width: '100%' });

Try this. This will set the width of container to 100%

edited Nov 7, 2018 at 6:16

answered Sep 17, 2018 at 11:20

Asheeka K P

4274 silver badges14 bronze badges

2 Comments

Asheeka K P Over a year ago

This will set the width of container to 100%

MARS Over a year ago

This is the only solution that worked for me (out of all the other ones).

Ron D. · Accepted Answer · 2015-09-15 09:20:27Z

9

Even better solution. Use:

$('#e1').select2({width: 'resolve'});

answered Sep 15, 2015 at 9:20

Ron D.

3,8246 gold badges33 silver badges39 bronze badges

3 Comments

Yeronimo Over a year ago

This is now true. This option was not available at the moment of asking the question (2013)

huykon225 Over a year ago

I have tried but it's not working with me ? can you tell me why ?

Nirmal Over a year ago

Thanks. This solves many issues with the width of both the selected box and options.

DanBrezeanu · Accepted Answer · 2022-07-07 01:56:42Z

9

Try this.

$(".js-example-basic-single").select2({dropdownAutoWidth : true});

edited Jul 7, 2022 at 1:56

DanBrezeanu

5523 silver badges13 bronze badges

answered Jan 19, 2020 at 6:54

Sumit Adak

3603 silver badges4 bronze badges

Comments

Dipesh Dwivedi · Accepted Answer · 2021-04-06 12:55:46Z

4

Try this.

<select id="e1" data-width="100%">

answered Apr 6, 2021 at 12:55

Dipesh Dwivedi

513 bronze badges

Comments

Yossi Shasho · Accepted Answer · 2014-10-29 14:33:59Z

2

Here's how to make select2 wider only when its open:

If you want it to expand towards the right side, add this css:

  .select2-container.select2-dropdown-open {
    width: 170%;
  }

if you want it to expand left, add this {

  .select2-container.select2-dropdown-open {
    width: 170%;
    margin-left: -70%;
  }

answered Oct 29, 2014 at 14:33

Yossi Shasho

3,65033 silver badges47 bronze badges

Comments

ByteHamster · Accepted Answer · 2015-04-29 15:55:22Z

1

I used this and it worked perfect, only that it will affect all the select2

#select2-drop{
    width: 400px !important;
}

edited Apr 29, 2015 at 15:55

ByteHamster

4,9619 gold badges41 silver badges56 bronze badges

answered Apr 29, 2015 at 15:32

kimoduor

6148 silver badges18 bronze badges

2 Comments

kimoduor Over a year ago

<style> #select2-drop{ width: 400px !important; } </style>

kimoduor Over a year ago

GIving it !important may also not make it responsive

vikas · Accepted Answer · 2020-10-12 10:14:43Z

0

This worked for me..

 .select2-container--krajee .select2-dropdown--below{
    width:230px !important;
    margin-left: -70px !important;
}

answered Oct 12, 2020 at 10:14

vikas

111 bronze badge

Comments

camila · Accepted Answer · 2023-11-12 05:40:04Z

0

try customizing your css, add this

.selection {
        width: 80%; 
    }

This worked for me

edited Nov 12, 2023 at 5:40

answered Nov 12, 2023 at 5:38

camila

11 bronze badge

Collectives™ on Stack Overflow

select2 - Setting different width to input and dropdown

10 Answers 10

4 Comments

4 Comments

2 Comments

3 Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

4 Comments

4 Comments

2 Comments

3 Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related