set the width of select2 input through Angular-ui directive

Question

I have problem making this plunkr  select2   angulat-ui  work     http   plnkr co edit NkdWUO p preview    In local setup  I get the select2 work  but I cannot set the width as described in the docs  It is too narrow to be used         Thank you     EDIT   Never mind that plnkr  I found a working fiddle here  http   jsfiddle net pEFy6     It looks like it is the behavior of select2 to collapse to the width of first element  I could set the width through bootstrap class  input-medium   Still not sure why angular-ui doesn t take config parameters

User · Accepted Answer

You need to specify the attribute width to resolve in order to preserve element width    document  ready function              myselect   select2   width   resolve

User · Answer

Wanted to add my solution here as well  This is similar to Ravindu s answer above  I added width   resolve   as a property within the select2          searchFilter   select2           width   resolve            Then I added a min-width property to select2-container with  important   select2-container       min-width  100   important     On the select element  the style  100px  important   attribute needed  important to work   lt select class  quot form-control quot  style  quot width  160px  quot  id  quot searchFilter quot  name  quot searchfilter   quot  gt

User · Answer

You can try like this  It works for me      MISSION ID   select2     On hide show or ajax request  we have to reinitialize the select2 plugin  For example       offialNumberArea   show        eventNameArea   hide         selectCriteria   change function        var thisVal     this  val        if thisVal     sailor                offialNumberArea   show                eventNameArea   hide              else                   offialNumberArea   hide                eventNameArea   show                MISSION ID   select2

User · Answer

add method container css in your script like this        your select id   select2         containerCss     display   block         it will set your select s width same as width your div

User · Answer

In my case the select2 would open correctly if there was zero or more pills   But if there was one or more pills  and I deleted them all  it would shrink to the smallest width   My solution was simply       myselect   select2   width   100

User · Answer

Setting width to  resolve  didn t work for me   Instead  i added  width 100   to my select  and modified the css like this     select2-offscreen  position  fixed  important    This was the only solution that worked for me  my version is 2 2 1  Your select will take all the available place  it is better than using   class  input-medium   from bootstrap  because the select is always staying in the container  even after resizing the window  responsive

User · Answer

select2 V4 0 3   lt select class  smartsearch  name  search  id  search  style  width 100    gt  lt  select gt

User · Answer

This is an old question but new info is still worth posting     Starting with Select2 version 3 4 0 there is an attribute dropdownAutoWidth which solves the problem and handles all the odd cases  Note it is not on by default  It resizes dynamically as the user makes selections  it adds width for allowClear if that attribute is used  and it handles placeholder text properly too       some select id   select2       dropdownAutoWidth   true

User · Answer

Easier CSS solution independent from select2    HTML  lt select id    class  input-xlg  gt   lt  select gt   lt input type  text  id    name    value    class  input-lg    gt     CSS  input-xxsm     width  40px important    for 2 digits      input-xsm     width  60px important    for 4 digits      input-sm     width  100px important    for short options        input-md     width  160px important    for medium long options      input-lg     width  220px important    for long options         input-xlg     width  300px important    for very long options        input-xxlg     width  100  important    100  of parent

User · Answer

Add width resolve option to your select2 function     document  ready function                  myselect   select2   width   resolve                       After add below CSS to your stylesheet   select2-container   width  100   important      It will sort the issue

User · Answer

On a recent project built using Bootstrap 4  I had tried all of the above methods but nothing worked  My approach was by editing the library CSS using jQuery to get 100  on the table         Select2 4 0 7      select2-multiple   select2          theme   bootstrap4     Doesn t work        width  100      Doesn t work     width   resolve         The Fix     select2-w-100   parent   find  span        removeClass  select2-container        css  width    100         css  flex-grow    1        css  box-sizing    border-box        css  display    inline-block        css  margin    0        css  position    relative        css  vertical-align    middle     Working Demo  x000D   x000D      select2-multiple   select2   x000D             theme   bootstrap4     Doesn t work x000D             width  100     Doens t work x000D          width   resolve  x000D          x000D        Fix the above style width 100  x000D          select2-w-100   parent   find  span   x000D           removeClass  select2-container   x000D           css  width    100    x000D           css  flex-grow    1   x000D           css  box-sizing    border-box   x000D           css  display    inline-block   x000D           css  margin    0   x000D           css  position    relative   x000D           css  vertical-align    middle   x000D   lt link href  https   stackpath bootstrapcdn com bootstrap 4 3 1 css bootstrap min css  rel  stylesheet   gt  x000D   lt link href  https   cdnjs cloudflare com ajax libs select2 4 0 7 css select2 min css  rel  stylesheet    gt  x000D   x000D   lt div class  table-responsive  gt  x000D       lt table class  table  gt  x000D           lt thead gt  x000D           lt tr gt  x000D               lt th scope  col  class  w-50  gt   lt  th gt  x000D               lt th scope  col  class  w-50  gt Trade Zones lt  th gt  x000D           lt  tr gt  x000D           lt  thead gt  x000D           lt tbody gt  x000D           lt tr gt  x000D               lt td gt  x000D                  1 x000D               lt  td gt  x000D               lt td gt  x000D                   lt select class  form-control select2-multiple select2-w-100  name  sellingFees    x000D                          multiple  multiple  gt  x000D                       lt option value  1  gt One lt  option gt  x000D                       lt option value  1  gt Two lt  option gt  x000D                       lt option value  1  gt Three lt  option gt  x000D                       lt option value  1  gt Okay lt  option gt  x000D                   lt  select gt  x000D               lt  td gt  x000D           lt  tr gt  x000D           lt  tbody gt  x000D       lt  table gt  x000D   lt  div gt  x000D   x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs select2 4 0 7 js select2 min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

With   4 0 of select2 I am using     select   select2     dropdownAutoWidth  true       These others did not work    dropdownCssClass   bigdrop   width   100     width   resolve

[css] set the width of select2 input (through Angular-ui directive)

Examples related to css

Examples related to twitter-bootstrap

Examples related to angularjs

Examples related to jquery-select2

Examples related to ui-select2