How do I change select2 box height

Question

I love the select2 box from https   github com ivaynberg select2 I am using the format  option to format each element  and it looks great   Everything is fine except the selected element is bigger than the height of the select box due to an image   I know how to change the width  but how do I change the height so that AFTER the element is selected  it shows the full thing  about 150px   Here is my initiation    lt script gt          selboxChild   select2           matcher  function term  text                 var t    js child sponsors text    js child sponsors text    text                return t toUpperCase   indexOf term toUpperCase     gt   0                      formatResult  formatChild          formatSelection  formatChild          escapeMarkup  function m                return m                     lt  script gt    and here is my select box   lt select id  selboxChild  style  width  300px  height  200px  gt       lt option value    gt No child attached lt  option gt   lt  select gt    To Clarify  I do NOT want the Height of each option to change I am looking for the select box to change height after you select a child   So when the page first loads it says  No child selected  When you click the drop down and select a child you see the child s image  NOW i need the select box to expand  Otherwise the picture of the child is cut off   Does anyone understand

User · Answer

None of the above solutions worked for me  This is my solution      Height fix for select2     select2-container  select2-selection--single   select2-container--default  select2-selection--single  select2-selection  rendered   select2-container--default  select2-selection--single  select2-selection  arrow       height  35px      select2-container--default  select2-selection--single  select2-selection  rendered       line-height  35px

User · Answer

You could do this with some simple css  From what I read  you want to set the Height of the element with the class  select2-choices     select2-choices     min-height  150px    max-height  150px    overflow-y  auto      That should give you a set height of 150px and it will scroll if needed  Simply adjust the height till your image fits as desired   You can also use css to set the height of the select2-results  the drop down portion of the select control    ul select2-results    max-height  200px      200px is the default height  so change it for the desired height of the drop down

User · Answer

IMHO  setting the height to a fixed number is rarely a useful thing to do  Setting it to whatever space is available on the screen is much more useful   Which is exactly what this code does      select   on  select2-opening   function         var container     this  select2  container       var position     this  select2  container   offset   top     var avail height     window  height   - container offset   top - container outerHeight           The 50 is a magic number here  I think this is the search box   other UI        chrome from select2         ul select2-results   css  max-height    avail height - 50    px       I made this for select2 3 5  I didn t test it with 4 0  but from the documentation is will probably work for 4 0 as well

User · Answer

You probably want to give a special class to your select2 first  then modify the css for that class only  rather than changing all select2 css  sitewide        selboxChild   select2   width   300px   dropdownCssClass   bigdrop        SCSS   bigdrop select2-container  select2-results  max-height  200px    bigdrop  select2-results  max-height  200px    bigdrop  select2-choices  min-height  150px  max-height  150px  overflow-y  auto

User · Answer

I use the following to dynamically adjust height of the select2 dropdown element so it nicely fits the amount of options      select   on  select2 open   function  e      var OptionsSize     this  find  option   size       The amount of options    var HeightPerOption   36     the height in pixels every option should be   var DropDownHeight   OptionsSize   HeightPerOption        select2-results  options   height DropDownHeight         Make sure to unset the  default  max-height in css    select2-container--default  select2-results gt  select2-results  options     max-height  inherit       only tested in version 4 of select2

User · Answer

This work for me   select2-container--default  select2-results gt  select2-results  options      max-height  500px  important

User · Answer

Lazy solution I found here https   github com panorama-ed maximize-select2-height  maximize-select2-height  This package is short and simple  It magically expands your Select2 dropdowns to fill the height of the window   It factors in the number of elements in the dropdown  the position of the Select2 on the page  the size and scroll position of the page  the visibility of scroll bars  and whether the dropdown is rendered upwards or downwards  And it resizes itself each time the dropdown is opened  And minified  it s  800 bytes  including comments     Note that this plugin is built for Select2 v4 x x only        my-dropdown   select2   maximizeSelect2Height      Enjoy

User · Answer

I had a similar problem  and most of these solutions are close but no cigar  Here is what works in its simplest form    select2-selection       min-height  10px  important      You can set the min-height to what ever you want   The height will expand as needed   I personally found the padding a bit unbalanced  and the font too big  so I added those here also

User · Answer

if you have several select2 and just want to resize one  do this   get id to your element      lt div id  skills  gt         lt select class  select2   gt   lt  select gt     lt  div gt    and add this css      skills  gt  span  gt span  gt span gt  select2-selection  rendered         line-height  80px  important

User · Answer

You should add the following style definitions to your CSS   select2-selection  rendered       line-height  31px  important     select2-container  select2-selection--single       height  35px  important     select2-selection  arrow       height  34px  important

User · Answer

Seems the stylesheet selectors have changed over time   I m using select2-4 0 2 and the correct selector to set the box height is currently    select2-container--default  select2-results  gt   select2-results  options       max-height  200px

User · Answer

Just add in select2 css     Make Select2 boxes match Bootstrap3 as well as Bootstrap4 heights      select2-selection  rendered   line-height  32px  important      select2-selection   height  34px  important

User · Answer

Enqueue another css file after the select2 css  and in that css add the following    select2-container  select2-selection     height  34px       i e  if you want the height of the select box height to be 34px

User · Answer

Try this  it s work for me    lt select name  select name  id  select id  class  select2 extend height wrap form-control  data-placeholder  ----  gt   lt option value    gt  lt  option gt   lt option value  1  gt test lt  option gt   lt  select gt    wrap select2-selection--single       height  100      select2-container  wrap select2-selection--single  select2-selection  rendered       word-wrap  break-word      text-overflow  inherit      white-space  normal         select2 extend height   select2  containerCssClass   wrap

User · Answer

I am using Select2 4 0  This works for me  I only have one Select2 control     select2-selection select2-selection--multiple       min-height  25px      max-height  25px

User · Answer

If anyone here trying to match input styles and the form group height of bootstrap4 with select2 here s what i did     select2-container       select2-selection          height  37px important             select2-selection  rendered          margin-top  4px important             select2-selection  arrow          margin-top  4px             select2-selection--single          border  1px solid  ced4da important              focus          outline  none             This will also remove the outlines

User · Answer

I came here looking for a way to specify the height of the select2-enabled dropdown  That what has worked for me    select2-container  select2-choice   select2-result-label     font-size  1 5em    height  41px     overflow  auto      select2-arrow   select2-chosen     padding-top  6px      BEFORE      AFTER

User · Answer

Very easy way to customize Select 2 rendered component with few lines of CSS Styling        Change the select container width and allow it to take the full parent width  select2        width  100   important       Set the select field height  background color etc      select2-selection           height  50px  important     background-color   light-color       Set selected value position  color   font size  etc      select2-selection  rendered        line-height  35px  important     color  yellow  important

User · Answer

For v4 0 7 You can increase the height by overriding CSS classes like this example        select2-container  select2-selection--single       height  36px      select2-container--default  select2-selection--single  select2-selection  rendered       line-height  36px      select2-container--default  select2-selection--single  select2-selection  arrow       height  36px

User · Answer

I know this question is super old  but I was looking for a solution to this same question in 2017 and found one myself    select2-selection       height  auto  important      This will dynamically adjust the height of your input based on its content

User · Answer

I came up with    select2   select2-search  field   select2-results  option       font-size 1 3em important     select2-selection  rendered       line-height  2em  important     select2-container  select2-selection--single       height  2em  important     select2-selection  arrow       height  2em  important

User · Answer

Apply this override CSS to increase the result box height   select2-container--bootstrap4  select2-results gt  select2-results  options       max-height  20em

User · Answer

edit select2 css file  Go to the height option and change    select2-container  select2-choice       display  block      height  36px      padding  0 0 0 8px      overflow  hidden      position  relative       border  1px solid  aaa      white-space  nowrap      line-height  26px      color   444      text-decoration  none       border-radius  4px       background-clip  padding-box       -webkit-touch-callout  none        -webkit-user-select  none         -khtml-user-select  none           -moz-user-select  none            -ms-user-select  none                user-select  none       background-color   fff      background-image  -webkit-gradient linear  left bottom  left top  color-stop 0   eee   color-stop 0 5   fff        background-image  -webkit-linear-gradient center bottom   eee 0    fff 50        background-image  -moz-linear-gradient center bottom   eee 0    fff 50        background-image  -o-linear-gradient bottom   eee 0    fff 50        background-image  -ms-linear-gradient top   fff 0    eee 50        filter  progid DXImageTransform Microsoft gradient startColorstr     ffffff   endColorstr     eeeeee   GradientType   0       background-image  linear-gradient top   fff 0    eee 50

User · Answer

The selected answer is correct but you shouldn t have to edit the select2 css file   You can add the following to your own custom css file    select2-container  select2-choice       display  block important      height  36px important      white-space  nowrap important      line-height  26px important

User · Answer

On 4 0 6  below is the solution that worked for me  Had to include select2-selection  rendered and select2-selection  arrow to vertically align the dropdown label and the arrow icon     select2-container  select2-selection    select2-selection  rendered    select2-selection  arrow       height  48px  important      line-height  48px  important

User · Answer

You don t need to change the height for all select2 - source  lt input gt  classes are being copied to select2-container  so you can style them by classes of inputs  For example if you want to style the height of some instances of select2  add class your-class to source  lt select gt  element and then use   select2-container your-class in your CSS file   Regards   There is some issue  classes name as select2  are not copied

User · Answer

Here s my take on Carpetsmoker s answer  which I liked due to it being dynamic   cleaned up and updated for select2 v4       selectField   on  select2 open   function  e      var container     this  select  select2-container      var position   container offset   top    var availableHeight     window  height   - position - container outerHeight      var bottomPadding   50     Set as needed      ul select2-results  options   css  max-height    availableHeight - bottomPadding     px

User · Answer

Quick and easy  add this to your page    lt style gt       select2-results           max-height  500px         lt  style gt

[jquery] How do I change select2 box height

Examples related to jquery

Examples related to jquery-select2