Bootstrap 4

[bangzek]

Is there bootstrap 4 version?

[RandyBooth]

+1

[RandyBooth]

@bangzek Here what I found that can use this for now if you use SASS.

http://avladov.com/blog/494/select2-with-bootstrap4

[achimha]

Needs three more lines:

$s2bs-input-border: #ccc !default;
$s2bs-clear-selection-hover-color: $btn-primary-color !default;
$s2bs-remove-choice-hover-color: $btn-primary-color !default;

[jwtoler]

Anybody have an issue with multiple select and the selected tags not being vertically centered?

[Alicia-L]

@jtoler: I had a problem with the text inside a single-choice select2 not being properly centered and figured out the reason (at least with bootstrap v4.0.0-alpha.6). In bootstrap's _variables.scss, the input line height is defined without a unit:

input-line-height: 1.25 !default;

When that's the case, this number should be multiplied by the font size to obtain the actual line height. So in the select2-bootstrap4.scss file in the link above you need to replace this...

$s2bs-input-height-base: calc(#{$input-padding-y * 2 + $input-line-height} + #{$border-width * 2}) !default;
$s2bs-input-height-large: calc(#{$input-padding-y-lg * 2 + $input-line-height} + #{$border-width * 2}) !default;
$s2bs-input-height-small: calc(#{$input-padding-y-sm * 2 + $input-line-height} + #{$border-width * 2}) !default;

...with this...

$s2bs-input-height-base: calc(#{$input-padding-y * 2 + $input-line-height * $font-size-base} + #{$border-width * 2}) !default;
$s2bs-input-height-large: calc(#{$input-padding-y-lg * 2 + $input-line-height * $font-size-lg} + #{$border-width * 2}) !default;
$s2bs-input-height-small: calc(#{$input-padding-y-sm * 2 + $input-line-height * $font-size-sm} + #{$border-width * 2}) !default;

Note that this assumes that the line height is provided without a unit. To make this more robust it would be a good idea to check whether this is the case and otherwise use the original variable definitions.

I hope that helps with your problem!

[jwtoler]

@Alicia-L I tried that but I still getting this:

[Alicia-L]

@jtoler: It seems your problem isn't related to line height after all. I'm not using multiple choice myself so I cannot research this in depth but I had a quick look and I see that the problem is that the choices (which have class .select2-selection__choice) have a negative top margin. I played around a bit and I figured that if I take this:

.select2-selection__choice {
      color: $s2bs-input-color;
      background: $s2bs-btn-default-bg;
      border: 1px solid $s2bs-btn-default-border;
      border-radius: $s2bs-selection-choice-border-radius;
      cursor: default;
      float: left;
      margin: ($s2bs-padding-base-vertical - 1) 0 0 $s2bs-padding-base-horizontal/2;
      padding: 0 $s2bs-padding-base-vertical;
    }

and invert the sign of the top margin (notice the - before the parenthesis)...

      margin: -($s2bs-padding-base-vertical - 1) 0 0 $s2bs-padding-base-horizontal/2;

it is now vertically centered. It could be that it's a complete coincidence that reversing the sign works. I have no idea whether that makes sense because I haven't looked into why the top margin is calculated as ($s2bs-padding-base-vertical - 1). I would recommend that you look into that to find out how this should really be calculated.

Good luck! Alicia

[angel-vladov]

@jtoler, @Alicia-L

I've updated the Gist. Download the files and let me know if it fixes the issues you were experiencing.

You'll now need to include 2 files for this to work. One with variables overrides and one with styles overrides. Here is an example with how the imports should look:

@import "node_modules/bootstrap/scss/bootstrap";
@import "node_modules/font-awesome/scss/font-awesome";
@import "node_modules/select2/src/scss/core";
@import "select2-bootstrap4.vars"; // Here are variables from the GIST
@import "node_modules/select2-bootstrap-theme/src/select2-bootstrap";
@import "select2-bootstrap4.after"; // Override theme styles

The issue was caused by the theme setting the height of .select2-selection__choice as $s2bs-input-height-large - 2. This -2 values is fine if size is in pixels but in Bs 4 everything is done using rem and em so we need to remove the -2 pixels. We are already taking the borders into account for the height calculations so this change won't break the layout.

NOTE: input-sm and input-lg were replaced with form-control-sm and form-control-lg in Bootstrap 4. This is something we'll need to handle later on. Perhaps a full override of the sass file will be better suited for the task.

[jwtoler]

Thanks to @angel-vladov and @Alicia-L ! Works now.

[Alicia-L]

@jtoler You're welcome! :)

@angel-vladov Thanks, Angel! In my case single-select boxes are a bit too tall after switching to the new gist. This is fixed if I replace this:

$s2bs-input-height-base: calc(#{$input-padding-y * 2 + $input-line-height} + #{$border-width * 2}) !default;
$s2bs-input-height-large: calc(#{$input-padding-y-lg * 2 + $input-line-height} + #{$border-width * 2}) !default;
$s2bs-input-height-small: calc(#{$input-padding-y-sm * 2 + $input-line-height} + #{$border-width * 2}) !default;

with this:

$s2bs-input-height-base: calc(#{$input-padding-y * 2 + $input-line-height * $font-size-base} + #{$border-width * 2}) !default;
$s2bs-input-height-large: calc(#{$input-padding-y-lg * 2 + $input-line-height * $font-size-lg} + #{$border-width * 2}) !default;
$s2bs-input-height-small: calc(#{$input-padding-y-sm * 2 + $input-line-height * $font-size-sm} + #{$border-width * 2}) !default;

as I had done before.

Thanks again! Alicia

[jwtoler]

@angel-vladov @Alicia-L Do you know why it appears I can not type in the search field? I'm using this in a modal w/ alpha-6. I have not actually tested it outside the modal though.

Edit: it works outside the modal

[rileytaylor]

I also had to add $screen-sm-min: 576px !default; before importing select2-bootstrap. This is because bootstrap has replaced the old media queries and related values with new @mixins (in this case, media-breakpoint-up.

[judetucker]

Thanks for all of your discovery guys. I have consolidated all of this into a single SCSS file that can simply replace the theme in this repo.

https://gist.github.com/judetucker/f12167df07b09b93590556c3b2d40537

[edwardmp]

@judetucker thanks but is anyone else running into the issue that the select title is displayed beneath the select box?

[judetucker]

@edwardmp your select2 is not initialized properly. Might not be getting the CSS. check your config.

[judetucker]

Here is the update for the new bootstrap 4 beta!

https://gist.github.com/judetucker/77fc1da23a70e9b15c21decd0bf74bec

[DaleMckeown]

Here is a more thorough implementation for Bootstrap 4 Beta, based on @judetucker's implementation for Bootstrap Alpha 6.

If anyone discovers any issues, please let me know.

https://gist.github.com/DaleMckeown/82995dcc482650f130a708f11a66a2a6

[paulm17]

@DaleMckeown

Sorry for more noise over here. But how to use your gist? I commented on it. Everything seems to load, but doesn't work as per the images you posted.

[quasipickle]

@paulm17 I just commented on how I got my setup to work.

[paulm17]

@quasipickle @DaleMckeown Thanks very much for filling in the blanks to that gist.

Can I further inconvenience someone else please?

Can someone provide a (compiled) css file?

I have node-sass installed, but honestly I have never worked or learnt sass and I don't have a build process with node (just yet).

Thanks

[DaleMckeown]

Hi,

I can provide CSS, but it would be specific to my build - for example, non-rounded corrners, colours specific to my theme, etc. You'd then have to modify it yourself.

SASS really isn't that hard to grasp - It's worth the small amount of time required to learn it.

On Wed, Sep 20, 2017 at 10:39 AM, Paul notifications@github.com wrote:

@quasipickle https://github.com/quasipickle @DaleMckeown https://github.com/dalemckeown Thanks very much for filling in the blanks to that gist.

Can I further inconvenience someone else please?

Can someone provide a css file?

I have node-sass installed, but honestly I have never worked or learnt sass and I don't have a build process with node (just yet).

Thanks

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/select2/select2-bootstrap-theme/issues/60#issuecomment-330800452, or mute the thread https://github.com/notifications/unsubscribe-auth/ABMRiRanwCVeU6zKOa5G-gujw8Z_xeUFks5skN1QgaJpZM4MCw11 .

[paulm17]

@DaleMckeown Would be awesome if you can. It's just really a band-aid for me to get to the next step of my project.

I do appreciate SASS is easy to learn. I'll be sure to do that next year when I port over from jquery to vue.js and a build process.

[DaleMckeown]

I've added a seperate, compiled .css file to the gist.

https://gist.github.com/DaleMckeown/82995dcc482650f130a708f11a66a2a6

[paulm17]

@DaleMckeown Many thanks for that, much appreciated!

[husnulhamidiah]

@DaleMckeown how do use that css?

I try to import it alongside original select2 css. Here's my code so far. I'm using jade template engine.

link(rel='stylesheet', href='/static/components/select2/dist/css/select2.min.css')
link(rel='stylesheet', href='/static/css/select2-bootrap4.css')

select#select-status.form-control(name='status')
    option(value='1') Active
    option(value='0') Not Active

$('#select-status').select2({
      theme: 'bootstrap'
})

But it gives me something like this.

[DaleMckeown]

Sorry, I don't know about Jade.

[paulm17]

@DaleMckeown Just to clarify. This works perfectly for me.

Many thanks for that, much appreciated!

[PascalPixel]

I ended up using the standard select2 theme, and then reverse applying some bootstrap variables

.select2-selection--multiple {
  @extend .form-control, .p-1;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  color: white;
  background-color: theme-color("secondary");
  border-color: darken(theme-color("secondary"), 5%);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: theme-color("light");
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: lighten(theme-color("secondary"), 25%);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: theme-color("primary");
}

This is sass, if you don't know how to use it, please learn...

---

Update

My final code that supports both multiple and single selects is a little more complex sadly

.select2-container--default,
.select2-container--default.select2-container--focus {
  @extend .w-100;
  .select2-selection {
    @extend .custom-select;
    @extend .pl-1;
    width: 100%;
    height: auto;
    min-height: calc(2.25rem + 2px);

    .select2-selection__choice {
      color: $gray-600;
      background-color: $gray-200;
      border-color: $gray-300;
    }
    .select2-selection__choice__remove {
      color: $gray-400;
      height: 1rem;
    }
  }
  .select2-results__option[aria-selected=true] {
    background-color: lighten(theme-color("secondary"), 25%);
  }
  .select2-results__option--highlighted[aria-selected] {
    background-color: theme-color("primary");
  }
  .select2-selection__arrow {
    display: none;
  }
  .select2-selection--multiple {
    padding: 0 1rem 0 0;
  }
}

Result:

[jcripo]

very good

/ -- Select2 v.4 Bootstrap v.4 -- / .select2-container .select2-selection--single { height: 35px; } .select2-container--default .select2-selection--single .select2-selectionrendered { line-height: 35px; } .select2-container--default .select2-selection--single .select2-selectionarrow { height: 35px; right: 2px; }

[jplaverdure]

There is WAY too much cryptic and contradicting stuff here.. Could the owner of the repo (@fk ?) just update the project to support BS4 beta, please ? It would be greatly appreciated.

[cknoxrun]

@jplaverdure Your tone isn't really contributing much, the author is surely a very busy person. If you can't take the time to implement the recommendations here, you may want to look elsewhere or submit a PR.

[angel-vladov]

I'm preparing a Bootstrap 4 version and will send a PR in the upcoming week. There are still a couple of things I need to clean up before it's ready. I'm updating the examples as well.

• You can check the code here
• Examples using Bootstrap 4 here

[odahcam]

Can we have BS4 styled labels instead of that gray ones?

[fk]

Nice work @angel-vladov! Looking forward to your PR!

[PascalPixel]

Nice job @angel-vladov keep at it 🥇

[fsasvari]

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

[paulm17]

Bootstrap 4 has now been released!

When can we expect a v4 theme?

Many thanks!

[krystyna93]

Yes, please answer as to if this will be compatible with the version Bootstrap 4?? Thanks.

[divdax]

+1

Definitely need a Bootstrap 4 Theme!

[odahcam]

Please, see https://github.com/berkan52/select2-bootstrap4-theme.

[paulm17]

@odahcam Except that it's not the final v4.

[odahcam]

I see no problems with that.

[angel-vladov]

There's an open PR with a Bootstrap 4 theme. It's in a usable state. You can check the examples, comment in the PR if you find any issues.

[krystyna93]

Just letting you all know that this version https://github.com/heimrichhannot/bootstrap-select is compatible with the new version of Bootstrap 4.0.0.

I currently have the Bootstrap 4.0.0 version and it works great.

Thanks.

[divdax]

@odahcam This isn't compatible with the bootstraps final version (v4.0.0)

• input border (:focus)
• Input width inside a .input-group isn't full width
• and many more...

@krystyna93 you mentioned a plugin that has nothing to do with select2... and the way it works isn't that what select2 offers.

[krystyna93]

@divdax Yes, bootstrap-select, specifically this amended version https://github.com/heimrichhannot/bootstrap-select is compatible with the latest bootstrap

[divdax]

@krystyna93 Maybe it works with bootstrap 4, but this is not what i and other select2 users need... 🤦‍♂️ Especially the tag feature isn't available in this plugin!

[odahcam]

Well, what do we need to do to put this repo up to Bs4?

[krystyna93]

@divdax it was merely a suggestion for anyone who was looking for an alternative. But yes, the tag function is pretty cool.

[divdax]

@fk Any plans for an update? 😄