Bootstrap 4 theme

[angel-vladov]

This PR includes all the suggestions from Issue #60 and examples updates.

• package.json dependencies are updated
• All examples in docs folder are updated to use Bootstrap 4
• Glyphicons are gone from BS4. Docs now use Fontawesome
• Hardcoded variables that were missing in BS 3 are now present in BS 4, so those are replaced as well
• Added the new validation classes. I've preserved the old BS 3 validation classes names as well. I find them more useful in some cases, but it might be just me.
• All comments in the theme now point to the Bootstrap 4 instead of 3
• IE 10, IE 9 and IE 8 are dropped from the README compatibility section. Bootstrap 4 doesn't support them. Bootstrap 4 does support IE 10 with issues. I haven't tested the theme in it.

You can check the example page here.

[fk]

Yay, this is great! 🎉 🎉 🎉 Thanks a lot @angel-vladov!

Unfortunately I won't have time to review this PR until at least next week – super busy :-( FWIW I don't have any issues with someone else merging this! I have get up to speed with BS4 still, too – haven't used it since the early alphas.

@select2/core @select2/design Maybe we should think about creating a new repository for the BS4 version, anyway? The old version still has a few visitors/views here on GitHub; haven't checked NPM numbers yet. I haven't thought about a monorepo much, either.

[angel-vladov]

I need the Bootstrap 3 theme for legacy projects I'm working on. I doubt it's just me. It will be quite an unpleasant surprise running bower update and getting a Bootstrap 4 theme in an old Bootstrap 3 project.

We should definitely have the Bootstrap 3 theme working in the foreseeable future. New repo, another branch or major version change will all work.

[angel-vladov]

@adriandelcl - I have no idea what you mean. Can you please provide more context and where the new styles are different from the original BS3 theme so I can fix the issue?

[OLTrustNo1]

@angel-vladov Thank you so much for this PR!!!!

What @adriandelcl is saying is that on you test site (https://angel-vladov.github.io/select2-bootstrap-theme/4.0.3.html) all data displayed in the drop down list is right aligned:

[angel-vladov]

Thanks for testing guys! Issue is fixed.

[tbelliard]

Thanks a lot for your work on this! I just encountered a relatively minor issue: BS4 has a variable $enable-rounded (boolean) to control whether you want rounded corners are not. This variable does not affect the value of $border-radius and instead is used to test whether border radius should be applied or not. Check https://github.com/twbs/bootstrap/search?utf8=%E2%9C%93&q=enable-rounded to see how it's used in Bootstrap 4 native styles. As you are using $border-radius directly and not testing $enable-rounded, using $enable-rounded in a bootstrap theme to control whether we want rounded corners or not is not taken into account for select2 fields. It's easily compensated by forcing $border-radius at 0, but for full compatibility with bootstrap 4 I suppose you could adjust the use of $border-radius by adding tests for $enable-rounded in a similar way as what is done in bootstrap 4.

[angel-vladov]

Interesting. Perhaps I should change it to use the border-radius mixin everywhere instead of adding $enable-rounded directly in the SCSS.

[tbelliard]

Based on the way it's used in bootstrap, the mixin definitely looks like the way to go :-)

[fsasvari]

When can we expect the release of bootstrap v4 beta theme ?

[angel-vladov]

NOTE: There is Bootstrap 4 beta-3. I haven't tested my changes with it yet. Let me know if you see any issues.

[florianlacreuse]

@angel-vladov Bootstrap 4 is now officialy released (stable version): https://blog.getbootstrap.com/2018/01/18/bootstrap-4/

Can we expect any updates from your side for this PR? Thanks you for your work!

[angel-vladov]

My plan is to work on this during the weekend. The PR will be updated in a day or two.

[angel-vladov]

Updated to work with the released Bootstrap 4 version.

For those who still need the Bootstrap 4 beta 2 version here's a branch with it.

[florianlacreuse]

@angel-vladov Thanks for your reactivity and the good work.

However I noticed that the single select and the multi select don't have the same height. The overall height of single select2 is 38px like default Bootstrap form-control but multi select2 have a computed height of 40px. This is due to select2-search__field having a 38px height and being inside a container having border (1px top/bottom).

Also, do you think it would be possible to have the same focus "box shadow" effect as form-control when select2 components are open (without dirty css rules)?

[angel-vladov]

Thanks for checking it. I think so. Will make the necessary changes.

[fk]

@select2/core @select2/design @select2/developers So more than two months after announcing I would merge this PR, I finally have some time—hold on, nah, that's a lie—…energy to take a look at this again.

As mentioned in https://github.com/select2/select2-bootstrap-theme/pull/72#issuecomment-346628573 and seconded by @angel-vladov in https://github.com/select2/select2-bootstrap-theme/pull/72#issuecomment-346645099 I'm still wondering about how to merge this. What do you think—new branch, new repo?

Sorry @angel-vladov and everyone here for being silent again for so long. ☹️ 🙏

[aliqasemzadeh]

Hello, I need bootstrap v4 select2 theme. Please check Bootswatch for themes.

[flo-sch]

@fk I would suggest a new branch and probably a new major version (2.0.0 ?), especially if there are some BC breaks such as dropping LESS files (I agree with that point btw, but since I didn't use LESS for more than 3 years, I probably don't have the most objective argument here)

[florianlacreuse]

@angel-vladov Thanks for the fix for the multi select height, negative margins seems the right choice to me.

I want to share my concern about the box-shadow on focus. Bootstrap does have a blue box-shadow on form-control elements on focus even if the variable $enable-shadows is set to false by default. This variable is used to handle the "inner" shadow of a form-control.

Here is the scss code to handle box shadow on focus for select2 elements:

$s2bs-form-control-focus-box-shadow: $input-box-shadow, $input-btn-focus-box-shadow !default;

// ...

&.select2-container--focus,
&.select2-container--open {
  .select2-selection {
    @include box-shadow($s2bs-form-control-focus-box-shadow);
    @include transition($s2bs-form-control-transition);
    border-color: $s2bs-input-border-focus;
  }
}

In Bootstrap, the mixin form-control-focus() does not use (explicitly) box-shadow() mixin:

@mixin form-control-focus() {
  &:focus {
    color: $input-focus-color;
    background-color: $input-focus-bg;
    border-color: $input-focus-border-color;
    outline: 0;
    // Avoid using mixin so we can pass custom focus shadow properly
    @if $enable-shadows {
      box-shadow: $input-box-shadow, $input-focus-box-shadow;
    } @else {
      box-shadow: $input-focus-box-shadow;
    }
  }
}

IMHO, we should have the same behavior. However, we have to deal with the dropdown (below or above), may be we should remove the box-shadow on open mode?

For instance (or with some $s2bs- variables):

&.select2-container--focus {
  &:not(.select2-container--open) {
    .select2-selection {
      @if $enable-shadows {
         box-shadow: $input-box-shadow, $input-focus-box-shadow;
       } @else {
        box-shadow: $input-focus-box-shadow;
       }
    }
  }
}

[florianlacreuse]

IMHO select2-search__field element should also have the right border-color and box-shadow on focus:

.select2-search--dropdown {
  .select2-search__field {
    // ...
    &:focus {
      border-color: $input-focus-border-color;
      box-shadow: $input-focus-box-shadow;
    }
  }
}

[divdax]

Two things:

• In a input group the select2 isn't full width.
• if i type something and hit enter my cursor is gone. (maybe it's another problem and not related to this PR) Does anyone else have the same problem? Also when to try to delete a tag with backspace it redirects me back as i would hit the browsers back button.

[angel-vladov]

@florianlacreuse I see what you mean regarding the box shadow. I did the necessary changes and tested a little bit and it does look cut when the dropdown is opened. I'm not sure what's the best approach to solve that.

As for the search field the original version of the theme doesn't apply the shadow and border color. I'm not sure if this was done on purpose. It does look ugly when applied.

I'd say we should probably leave the search field as is but apply the box shadow change and come up with a way to make it look nice with the dropdown.

@fk thoughts?

[angel-vladov]

@divdax:

• Can you give an example what you mean by that?
• The theme doesn't change select2 behavior. It only applies styles.

[divdax]

@angel-vladov

• The focus problem is a bug in select2: https://github.com/select2/select2/issues/5185 Using 4.0.5 for now.

• When using the select2 as a input-group (https://getbootstrap.com/docs/4.0/components/input-group/#custom-select) it looks like this (Empfänger):

• The focus style is only correct after selecting a option:

• Different sized inputs are also not working like: .form-control .form-control-lg

[JavaTMP]

Thank you @angel-vladov for your efforts and modifications it is work perfectly as required in Bootstrap 4 LTR , but in Bootstrap 4 RTL it needed some modification for radius so we applied the following simple modifications to work and it is working as expected, so i think it is better to consider them in your base scss file:

// import from: https://github.com/angel-vladov/select2-bootstrap-theme/blob/master/src/select2-bootstrap.scss 
@import "../../../../../node_modules/select2-bootstrap-theme/src/select2-bootstrap.scss";

/*.select2-container--bootstrap .select2-dropdown {
        border-bottom-left-radius: $border-radius;
        border-bottom-right-radius: $border-radius;
    overflow-x: initial;
}*/
.input-group > .select2-container--bootstrap {
    width: auto;
    > .selection > .select2-selection.form-control {
        width: 100%;
    }
}

/**
 * Reset rounded corners
 */
$s2bs-border-radius-base: $border-radius !default;
$s2bs-border-radius-large: $border-radius-lg !default;
$s2bs-border-radius-small: $border-radius-sm !default;

.input-group > .select2-hidden-accessible {
    &:first-child + .select2-container--bootstrap[dir="rtl"] > .selection > .select2-selection,
        &:first-child + .select2-container--bootstrap[dir="rtl"] > .selection > .select2-selection.form-control {
        @include border-radius(0);
        @include border-right-radius($s2bs-border-radius-base);
    }
    &:first-child + .select2-container--open.select2-container--below.select2-container--bootstrap[dir="rtl"] > .selection > .select2-selection,
        &:first-child + .select2-container--open.select2-container--below.select2-container--bootstrap[dir="rtl"] > .selection > .select2-selection.form-control {
        @include border-bottom-radius(0);
    }
    &:first-child + .select2-container--open.select2-container--above.select2-container--bootstrap[dir="rtl"] > .selection > .select2-selection,
        &:first-child + .select2-container--open.select2-container--above.select2-container--bootstrap[dir="rtl"] > .selection > .select2-selection.form-control {
        @include border-top-radius(0);
    }

    &:not(:first-child) + .select2-container--bootstrap[dir="rtl"]:not(:last-child) > .selection > .select2-selection,
        &:not(:first-child) + .select2-container--bootstrap[dir="rtl"]:not(:last-child) > .selection > .select2-selection.form-control {
        @include border-radius(0);
    }

    &:not(:first-child):not(:last-child) + .select2-container--bootstrap[dir="rtl"]:last-child > .selection > .select2-selection,
        &:not(:first-child):not(:last-child) + .select2-container--bootstrap[dir="rtl"]:last-child > .selection > .select2-selection.form-control {
        @include border-radius(0);
        @include border-left-radius($s2bs-border-radius-base);
    }
    &:not(:first-child):not(:last-child) + .select2-container--open.select2-container--above.select2-container--bootstrap[dir="rtl"]:last-child > .selection > .select2-selection,
        &:not(:first-child):not(:last-child) + .select2-container--open.select2-container--above.select2-container--bootstrap[dir="rtl"]:last-child > .selection > .select2-selection.form-control {
        @include border-top-radius(0);
    }
    &:not(:first-child):not(:last-child) + .select2-container--open.select2-container--below.select2-container--bootstrap[dir="rtl"]:last-child > .selection > .select2-selection,
        &:not(:first-child):not(:last-child) + .select2-container--open.select2-container--below.select2-container--bootstrap[dir="rtl"]:last-child > .selection > .select2-selection.form-control {
        @include border-bottom-radius(0);
    }
}

.input-group-sm > .select2-hidden-accessible {
    &:first-child + .select2-container--bootstrap[dir="rtl"] > .selection > .select2-selection,
        &:first-child + .select2-container--bootstrap[dir="rtl"] > .selection > .select2-selection.form-control {
        @include border-radius(0);
        @include border-right-radius($s2bs-border-radius-small);
    }

    &:not(:first-child) + .select2-container--bootstrap[dir="rtl"]:not(:last-child) > .selection > .select2-selection,
        &:not(:first-child) + .select2-container--bootstrap[dir="rtl"]:not(:last-child) > .selection > .select2-selection.form-control {
        @include border-radius(0);
    }

    &:not(:first-child):not(:last-child) + .select2-container--bootstrap[dir="rtl"]:last-child > .selection > .select2-selection,
        &:not(:first-child):not(:last-child) + .select2-container--bootstrap[dir="rtl"]:last-child > .selection > .select2-selection.form-control {
        @include border-radius(0);
        @include border-left-radius($s2bs-border-radius-small);
    }
}
.input-group-lg > .select2-hidden-accessible {
    &:first-child + .select2-container--bootstrap[dir="rtl"] > .selection > .select2-selection,
        &:first-child + .select2-container--bootstrap[dir="rtl"] > .selection > .select2-selection.form-control {
        @include border-radius(0);
        @include border-right-radius($s2bs-border-radius-large);
    }

    &:not(:first-child) + .select2-container--bootstrap[dir="rtl"]:not(:last-child) > .selection > .select2-selection,
        &:not(:first-child) + .select2-container--bootstrap[dir="rtl"]:not(:last-child) > .selection > .select2-selection.form-control {
        @include border-radius(0);
    }

    &:not(:first-child):not(:last-child) + .select2-container--bootstrap[dir="rtl"]:last-child > .selection > .select2-selection,
        &:not(:first-child):not(:last-child) + .select2-container--bootstrap[dir="rtl"]:last-child > .selection > .select2-selection.form-control {
        @include border-radius(0);
        @include border-left-radius($s2bs-border-radius-large);
    }
}

But only a small issue the following that we do not know how to solve it yet in input-group input-group-lg:

The online page of Bootstrap 4 select2 RTL demo is here : http://demo.javatmp.com/JavaTMP-Static-Ajax-RTL/#pages/plugins/jQuery-select2-bootstrap.html

[kevin-brown]

My vote is to drop the LESS version completely. Maybe I don't see the forest for the trees, but I doubt there will be many people requiring a custom, LESS-based build of the Select2 theme. Curious what other people think.

I'm in favor of dropping it, Select2 itself is not distributed with a LESS version.

As mentioned in #72 (comment) and seconded by @angel-vladov in #72 (comment) I'm still wondering about how to merge this. What do you think—new branch, new repo?

New branch, or make this the master branch and move the old master branch to some 3.x-specific branch.

[JavaTMP]

I think it is a good idea to keep bootstrap 3 version as a lot still use it and you can create a separate sass and css inside master branch with file for bootstrap 4 for ex: select2-bootstrap4.min.css and select2-bootstrap.scss files and update the select2 theme for bootstrap 3 we could use: $.fn.select2.defaults.set("theme", "bootstrap"); and for bootstrap 4 we could use: $.fn.select2.defaults.set("theme", "bootstrap4"); Some of the plugins like summernote and fullcalendar use this idea of separating theme file for each version of bootstrap.

[angel-vladov]

@JavaTMP I was busy the last 2 weeks and didn't have time to integrate your suggestions. Thanks for pointing those out. I'll go over them this week and make the necessary changes.

[angel-vladov]

@JavaTMP I'm having hard time reproducing the issues from your comment. Can you please give me the necessary markup, so I can add to the documentation examples?

[JavaTMP]

@angel-vladov our modifications above are related to RTL use only , so I think you can put them at the end of your base sass file or in a separate file that override base class for example select2-bootstrap-RTL.scss for those who interested. attached file containing our sass file for adding RTL support to your file and note that @import "../../../../../node_modules/select2-bootstrap-theme/src/select2-bootstrap.scss"; is referenced your file from https://github.com/angel-vladov/select2-bootstrap-theme.git custom-bootstrap-select2-bootstrap-theme.zip