search

select2 / select2-bootstrap-theme

A Select2 v4 Theme for Bootstrap 3
https://select2.github.io/select2-bootstrap-theme/
MIT License
871 stars 498 forks source link

Bootstrap 4 theme #72

Open angel-vladov opened 6 years ago

angel-vladov commented 6 years ago

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

You can check the example page here.

fk commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

@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: image

angel-vladov commented 6 years ago

Thanks for testing guys! Issue is fixed.

tbelliard commented 6 years ago

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 commented 6 years ago

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

tbelliard commented 6 years ago

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

fsasvari commented 6 years ago

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

angel-vladov commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

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

angel-vladov commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

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

fk commented 6 years ago

@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 commented 6 years ago

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

flo-sch commented 6 years ago

@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 commented 6 years ago

@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 commented 6 years ago

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 commented 6 years ago
Two things:
angel-vladov commented 6 years ago

@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. search-field-border

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 commented 6 years ago

@divdax:

divdax commented 6 years ago

@angel-vladov

JavaTMP commented 6 years ago

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: select2-bootstrap-theme-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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

@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 commented 6 years ago

@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

angel-vladov commented 6 years ago

We need to be careful with those changes since they'll apply even when content is LTR and we want only some of the components to have RTL content.

In addition BS 4 doesn't actually have official RTL support and it will probably land in 4.2 based on the comments here.

There are a couple of BS 4 forks out there that add support now but it's not the official version. I'll add support in a separate file but we shouldn't be compiling it in the main css file for the time being.

xithan commented 6 years ago

Issues with input-group were mentioned above. I'm not sure if they are considered to be solved. The styling for input-groups is still broken for me, but maybe I'm doing something wrong. Here is an example: https://jsfiddle.net/xithan/aq9Laaew/4584/

edit_fiddle_-_jsfiddle
angel-vladov commented 6 years ago

@xithan There're a couple of things you need to change.

  1. Add form-control class to the select element

        <select class="form-control">
       <option value="1992">1992</option>
       <option value="1991">1991</option>
       <option value="1990">1990</option>
    </select>

    Check Bootstrap 4 examples here.

  2. Include select2.full.js (here) instead of select2.js. This will allow us to preserve the select element classes.

  3. Use containerCssClass: ":all:" so that select2 will copy the classes from the original select element classes onto the generated DOM elements.

    $(this).select2({containerCssClass: ':all:'});
leider commented 6 years ago

Any news here? - I vote for pulling it, release as new version to npm and clearly state the known issues. I do not know how many people are affected by those, but waiting is no progress.

angel-vladov commented 6 years ago

I'll publish my fork in npm today. It will do the job for the time being.

leider commented 6 years ago

Very much appreciated

angel-vladov commented 6 years ago

Here's the package: https://www.npmjs.com/package/select2-theme-bootstrap4

I still have cleanup work to do on that but you can use it as is. I've bumped the version to 0.2.0 to differentiate it from the Bootstrap 3 version.

NOTE: Package naming is in reversed order due to the original name being taken already with a bs4 beta2 compatible theme.

fauno commented 6 years ago

thanks for the package! i'm trying to make the validation work with the .form-control:valid and .form-control:invalid pseudo-elements. so far the select2 inputs are red/green only when they have focus on them, but i'm still trying to find the correct class. i'll submit a patch when i have it :)

fauno commented 6 years ago

this is as far a i got in sass :)

/* Select2 Bootstrap4 Validation */

.was-validated {
  .form-control {
    &:invalid {
      ~ .select2-container--bootstrap {
        border: 1px solid #dc3545;
        border-radius: 0.25rem;

        .select2-dropdown {
          border: 1px solid #dc3545;
          border-radius: 0.25rem;
        }
      }
    }
    &:valid {
      ~ .select2-container--bootstrap {
        border: 1px solid #28a745;
        border-radius: 0.25rem;

        .select2-dropdown {
          border: 1px solid #28a745;
          border-radius: 0.25rem;
        }
      }
    }
  }
}
fauno commented 6 years ago

Hi, I've found that setting containerCssClass: ':all:' prevents single (as in multiple="false") select2 from showing the dropdown, can someone confirm? it's working fine otherwise

angel-vladov commented 6 years ago

@fauno Post a jsfiddle or similar showing this not working. All the examples use ':all:. It's hard to tell why it breaks for you without seeing the code.

fauno commented 6 years ago

@angel-vladov here's the fiddle, but it doesn't work in regular select2 either, so the issue is not here :P

https://jsfiddle.net/xpvt214o/287227/

angel-vladov commented 6 years ago

@fauno Your code doesn't work because you use select2 class on the select element. The way :all: works is by preserving the classes and cloning them on the generated DOM. Use any class name that's not select2 and it will work.

Check this jsfiddle Example: 

    <select class="form-control my-select">
      <option>Si</option>
      <option>No</option>
    </select>
$('.my-select').select2({
  containerCssClass: ':all:',
  theme: 'bootstrap'
});
cireficc commented 6 years ago

Getting this merged and onto CDNJS would be awesome ❤️For now I've just downloaded the minified CSS and wrote a TODO to track this PR.

angel-vladov commented 6 years ago

Unfortunately the fork downloads and popularity doesn't meet the necessary requirements for it to be published in CDNJS. For the time being you'll have to copy the minified file (like you did) or integrate it in your build scripts.

leandroruel commented 6 years ago

this is really using BS4 theme? because i think it get weird when the dropdown is opened

b-nik commented 6 years ago

Hey! Thanks for the nice work! I think there is a mixup with the hover and selected css states?

It seems to me like they are the other way around. I think the following makes more sense visually? (the selected options were almost invisible before, getting the $light color, while hover was the primary color)

    /**
     * Selected state.
     */

    &[aria-selected=true] {
      background-color: $s2bs-dropdown-link-active-bg;
      color: $s2bs-dropdown-link-active-color;
    }

    /**
     * Hover state.
     */

    &--highlighted[aria-selected=false] {
      background-color: $s2bs-dropdown-link-hover-bg;
      color: $s2bs-dropdown-link-hover-color;
    }
angel-vladov commented 6 years ago

Thanks for checking @b-nik.

Depends on what you count as selected. Is selected the currently selected option in that context or the one you are at with your mouse? This logic was there since 2015. I'd suggest you file an issue and start a discussion there.

I find it risky to change the current logic right now and I don't feel comfortable taking that decision on my own for the new bs4 version. This might break the theme for many people.

ioxFR commented 6 years ago

Hey,

Thanks for your work @angel-vladov ! When can we except a review & merge of your work for next release?

Thanks!

florianajir commented 6 years ago

Can we know when do you plan the next release please ?