<select name="multiselect_name" id="multiselect_id" multiple="multiple" class="chosen-select ">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
      <option>Option 4</option>
  </select>
<select name="{{ multiselect_name }}"
        id="{{ multiselect_id }}"
        multiple="multiple"
        class="chosen-select {% if modifier %}{{ modifier }}{% endif %}">
  {% for option in options %}
    <option>{{ option.label }}</option>
  {% endfor %}
</select>
{
  "label": "Multiselect with Chosen",
  "multiselect_name": "multiselect_name",
  "multiselect_id": "multiselect_id",
  "options": [
    {
      "label": "Option 1"
    },
    {
      "label": "Option 2"
    },
    {
      "label": "Option 3"
    },
    {
      "label": "Option 4"
    }
  ]
}
  • Content:
    .chosen-container {
      width: 100% !important; // sass-lint:disable-line no-important
      max-width: 100% !important; // sass-lint:disable-line no-important
    
    
      &.chosen-container-multi {
        ul.chosen-choices {
          height: auto;
          margin: 0;
          padding-right: 1rem;
          box-shadow: none;
        }
    
        .chosen-choices {
          &,
          li.search-field input[type="text"] {
            @extend %input-base;
            @extend %select-base;
          }
        }
      }
    
      &.chosen-with-drop .chosen-drop {
        border-color: $color-light-gray;
        box-shadow: none;
      }
    
      .chosen-choices {
        border-color: $color-light-gray !important; // sass-lint:disable-line no-important
    
        background: $color-white;
        background-image: none !important; // sass-lint:disable-line no-important
        color: $color-dark-gray;
      }
    
      .chosen-results li.highlighted {
        background-color: $color-blue;
        background-image: none;
      }
    }
    
    .chosen-container-multi .chosen-choices li.search-choice {
      @extend %btn;
      @include btn-s;
      text-align: left;
    
      span {
        margin-left: -5px;
      }
    
      .search-choice-close {
        right: 1.2rem;
        background: none;
        background-image: none !important;// sass-lint:disable-line no-important
    
    
        &::after {
          @extend %icon-base-css;
          @extend %icon-close;
          color: $color-white;
          font-size: 1.25rem;
          line-height: 1.7rem;
        }
      }
    }
    
    // Specific ul specificity enables us to override chosen.css without using !important statements.
    .chosen-container-multi ul.chosen-choices li.search-choice {
      display: inline-block;
      width: auto;
      min-height: 2rem;
      margin: .18rem $gutter-width/2 0 0;
      padding-right: 1.875rem;
      line-height: 1.6rem;
    }
    
    select[multiple].no-chosen-select {
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gU3ZnIFZlY3RvciBJY29ucyA6IGh0dHA6Ly93d3cub25saW5ld2ViZm9udHMuY29tL2ljb24gLS0+DQo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAwMCAxMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAwIDEwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPG1ldGFkYXRhPiBTdmcgVmVjdG9yIEljb25zIDogaHR0cDovL3d3dy5vbmxpbmV3ZWJmb250cy5jb20vaWNvbiA8L21ldGFkYXRhPg0KPGc+PHBhdGggZD0iTTUwMCwxMEwyMjcuOCwzOTEuMWg1NDQuNEw1MDAsMTB6IE01MDAsOTkwbDI3Mi4yLTM4MS4xSDIyNy44TDUwMCw5OTB6Ii8+PC9nPg0KPC9zdmc+');
      background-repeat: no-repeat;
      background-position: center right 5px;
      background-size: 1rem 1rem;
    }
    
  • URL: /components/raw/input-multiselect-chosen/_input-multiselect-chosen.scss
  • Filesystem Path: components/21-atoms/inputs/input-multiselect-chosen/_input-multiselect-chosen.scss
  • Size: 2.6 KB
  • Content:
    'use strict';
    
    (function ($) {
    
      /**
       * Invoked after after loading the initial page and after each AJAX request.
       *
       * @param context
       *   The DOM context.
       * @param settings
       *   Object of additional settings.
       */
      $(window).on('load', initMultiselectChosen);
    
      /**
       * Replace the mobile breadcrumb of Gent base by our own.
       */
      function initMultiselectChosen() {
        var isIpad = navigator.userAgent.match(/iPad/i) != null;
        var isIphone = navigator.userAgent.match(/iPhone/i) != null;
    
        if (isIpad === false) {
          $('.chosen-select').loadChosenSelect();
        }
    
        if (isIpad || isIphone) {
          $('.chosen-select').addClass('no-chosen-select');
        }
      }
    
    })(jQuery);
    
  • URL: /components/raw/input-multiselect-chosen/input-multiselect-chosen.binding.js
  • Filesystem Path: components/21-atoms/inputs/input-multiselect-chosen/input-multiselect-chosen.binding.js
  • Size: 705 Bytes
  • Content:
    /**
     * @file
     * Implements the jQuery Chosen plugin.
     *
     * @author
     * Gert-Jan Meire
     *
     */
    'use strict';
    
    (function ($) {
    
      $.fn.extend({
    
        /**
         * Creates a jQuery extension function.
         *
         */
        loadChosenSelect: function () {
          $(this).chosen({disable_search: true});
        }
    
      });
    })(jQuery);
    
  • URL: /components/raw/input-multiselect-chosen/input-multiselect-chosen.functions.js
  • Filesystem Path: components/21-atoms/inputs/input-multiselect-chosen/input-multiselect-chosen.functions.js
  • Size: 315 Bytes

There are no notes for this item.