Rendering input-size

[Seb33300]

Hello,

Actually, if we want to render a input-lg / input-sm / etc... we have 2 ways to do it:

• Adding the form-group-* class to the parent
• Adding the input-* to the select and set the containerCssClass option to :all: (this require to use select2.full.js)

In my case, the input-sm css class is applied to the <select> tag and I am not able to change the html markup. So I need to use the 2nd way to apply the sm style on my select.

The problem is that using containerCssClass option to :all: will apply all classes attached to the select on the .select2-selection div which will cause side effects in my project.

Why is the containerCssClass option used to copy classes? Maybe this could be improved, we could use the css sibling selector to style input sizes instead of copying classes from the select?

select.input-sm + .select2 .select2-selection {
    /* sm size styles */
}

[soullivaneuh]

which will cause side effects in my project.

Could you please elaborate the side effects?

[soullivaneuh]

Also, I tried your solution:

.input-sm + .select2-container {
  .select2-selection {
    height: $input-height-small;
    padding: $padding-small-vertical $padding-small-horizontal;
    font-size: $font-size-small;
    line-height: $line-height-small;
    border-radius: $input-border-radius-small;
  }

  .select2-dropdown {
    .select2-results {
      ul.select2-results__options {
        li {
          height: $input-height-small;
          padding: $padding-small-vertical $padding-small-horizontal;
          font-size: $font-size-small;
          line-height: $line-height-small;
        }
      }
    }
  }
}

This work but only for the selection, not the dropdown because the .select2-container of the dropdown is not next to the .input-sm select.

[soullivaneuh]

@Seb33300 Okay I found a way to adapt sizing to be near bootstrap v3 by adding new classes.

Here is the JS part (assuming $element is something like $('select.select2')):

class Form {
  static select2($element) {
    const
      config = {
        minimumResultsForSearch: 8,
      },
      templateResult = $element.data('s2-template-result'),
      templateSelection = $element.data('s2-template-selection');

    if (typeof templateResult !== 'undefined') {
      config.templateResult = select2Templates[templateResult];
    }
    if (typeof templateSelection !== 'undefined') {
      config.templateSelection = select2Templates[templateSelection];
    }

    // Here, add a special class for sm/lg sizes
    if ($element.hasClass('input-sm')) {
      config.containerCssClass = 'select2-sm';
      config.dropdownCssClass = 'select2-sm';
    }
    if ($element.hasClass('input-lg')) {
      config.containerCssClass = 'select2-lg';
      config.dropdownCssClass = 'select2-lg';
    }

    $element
      .select2(config)
      // @see https://github.com/select2/select2/issues/3320#issuecomment-350249668
      .on('select2:unselecting', (event) => {
        if (event.params.args.originalEvent) {
          event.params.args.originalEvent.stopPropagation();
        } else {
          $(this).one('select2:opening', (openingEvent) => {
            openingEvent.preventDefault();
          });
        }
      })
    ;
  }
}

And the css (SASS):

.select2-container {
  .select2-selection.select2-sm, .select2-dropdown.select2-sm li.select2-results__option {
    padding: $padding-small-vertical $padding-small-horizontal;
    font-size: $font-size-small;
    line-height: $line-height-small;

    &.select2-selection {
      height: $input-height-small;
      border-radius: $input-border-radius-small;

      &[aria-expanded=true] {
        @include border-bottom-radius(0);
      }
    }
  }

  .select2-selection.select2-lg, .select2-dropdown.select2-lg li.select2-results__option {
    padding: $padding-large-vertical $padding-large-horizontal;
    font-size: $font-size-large;
    line-height: $line-height-large;

    &.select2-selection {
      height: $input-height-large;
      border-radius: $input-border-radius-large;

      &[aria-expanded=true] {
        @include border-bottom-radius(0);
      }
    }
  }
}

Hope it helps!

But yes, it would be great to have it integrated to the theme. :+1: