How do I display the selected tags in Select2 below the dropdown box?

Question

I am using Select2 (version 4) with tags and would like to have the selected choices display below the input field.

So instead of:

Rather have:

Is this possible and if so how do I achieve that?

EDIT: Code is:

<select class="js-example-tags form-control" multiple="multiple">
    <option selected="selected">orange</option>
    <option selected="selected">white</option>
    <option selected="selected">purple</option>
    <option selected="selected">red</option>
    <option selected="selected">blue</option>
    <option selected="selected">green</option>
</select>

and

$(".js-example-tags").select2({
tags: true
})

Answer 1

When your elements get rendered, a ul with a class is added for the elements. This class name is: select2-selection__rendered So my idea was that after it was rendered, I could take this class and add some bottom. For this I used JQuery using $(function() note that what this does is to load after everything has loaded, so for the javascript code you need, is as follows (tested):

Javascript code:

  <script>
  $(".js-example-tags").select2({
   tags: true
  });

   $(function() {
      //Here you add the bottom pixels you need. I added 200px.
      $('.select2-selection__rendered').css({top:'200px',position:'relative'});
   });
  </script>