Bootstrap 4 #60

bangzek · 2017-02-16T09:21:03Z

Is there bootstrap 4 version?

RandyBooth · 2017-02-17T13:37:54Z

+1

RandyBooth · 2017-02-17T17:23:39Z

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

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

achimha · 2017-02-24T10:30:42Z

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 · 2017-03-14T07:09:17Z

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

Alicia-L · 2017-03-22T10:12:14Z

@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 · 2017-03-22T14:01:33Z

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

Alicia-L · 2017-03-22T15:57:21Z

@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 · 2017-03-26T23:44:12Z

@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 · 2017-03-27T11:09:14Z

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

Alicia-L · 2017-03-29T11:36:17Z

@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 · 2017-03-30T18:14:52Z

@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 · 2017-03-30T20:36:36Z

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 · 2017-04-06T22:31:01Z

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 · 2017-05-02T00:35:45Z

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

judetucker · 2017-05-02T21:22:08Z

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

Ref: https://gist.github.com/angel-vladov/404de94c5f9703fa462838f77a673446 See: select2#60

judetucker · 2017-08-16T03:45:08Z

Here is the update for the new bootstrap 4 beta!

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

DaleMckeown · 2017-08-16T13:57:58Z

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

See https://select2.github.io and select2/select2-bootstrap-theme#60

paulm17 · 2017-09-19T14:32:35Z

@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 · 2017-09-19T14:45:10Z

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

paulm17 · 2017-09-20T09:39:24Z

@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 · 2017-09-20T09:59:19Z

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 ***@***.***> 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 <#60 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABMRiRanwCVeU6zKOa5G-gujw8Z_xeUFks5skN1QgaJpZM4MCw11> .

paulm17 · 2017-09-20T10:10:35Z

@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 · 2017-09-20T10:52:55Z

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

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

paulm17 · 2017-09-20T11:02:42Z

@DaleMckeown Many thanks for that, much appreciated!

husnulhamidiah · 2017-10-17T06:19:36Z

@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 · 2017-10-17T08:39:49Z

Sorry, I don't know about Jade.

paulm17 · 2017-10-17T09:05:31Z

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

Many thanks for that, much appreciated!

PascalPixel · 2017-10-20T07:28:12Z

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 · 2017-11-02T01:39:39Z

very good

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

jplaverdure · 2017-11-08T20:24:21Z

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 · 2017-11-15T20:57:34Z

@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 · 2017-11-19T21:38:13Z

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 · 2017-11-20T01:57:43Z

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

fk · 2017-11-20T08:14:42Z

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

PascalPixel · 2017-11-21T08:38:30Z

Nice job @angel-vladov keep at it 🥇

fsasvari · 2017-12-21T09:30:19Z

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

paulm17 · 2018-01-18T19:22:28Z

Bootstrap 4 has now been released!

When can we expect a v4 theme?

Many thanks!

krystyna93 · 2018-02-01T02:06:47Z

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

divdax · 2018-02-12T15:48:18Z

+1

Definitely need a Bootstrap 4 Theme!

odahcam · 2018-02-12T19:05:31Z

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

paulm17 · 2018-02-12T19:13:02Z

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

odahcam · 2018-02-12T19:57:46Z

I see no problems with that.

angel-vladov · 2018-02-12T20:41:41Z

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 · 2018-02-12T23:58:05Z

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 · 2018-02-15T07:23:19Z

@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 · 2018-02-15T13:16:15Z

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

divdax · 2018-02-15T13:26:34Z

@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 · 2018-02-15T13:31:46Z

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

krystyna93 · 2018-02-15T13:39:16Z

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

divdax · 2018-02-18T20:32:11Z

@fk Any plans for an update? 😄

mkelley82 · 2018-02-28T21:15:23Z

+1

JavaTMP · 2018-03-10T00:22:08Z

We are using @angel-vladov fork and it is working perfectly with miner issues the demo pages for Bootstrap 4 LTR and RTL are the following:
Bootstrap 4 select2 LTR demo: http://demo.javatmp.com/JavaTMP-Static-Ajax/#pages/plugins/jQuery-select2-bootstrap.html
Bootstrap 4 select2 RTL demo: http://demo.javatmp.com/JavaTMP-Static-Ajax-RTL/#pages/plugins/jQuery-select2-bootstrap.html

We still have few issues that we stated here #72 (comment)

skn3 · 2018-05-11T11:25:07Z

please update this!

NikoGrano · 2018-05-12T15:25:41Z

There has been no updates to this repo for a while. I do not expect this will be ever to upgraded to support Boostrap 4.

However, other repos exist for Bt4. Please see https://github.com/berkan52/select2-bootstrap4-theme for example.

@skn3

angel-vladov · 2018-05-13T19:51:56Z

Check the PRs. There's a Bootstrap 4 version in development - #72

fk mentioned this issue Mar 29, 2017

Not compatible with bootstrap 4 - t0m/select2-bootstrap-css#99

Closed

rchavik added a commit to rchavik/select2-bootstrap-theme that referenced this issue May 11, 2017

Import angel-vladov gist

03ded46

Ref: https://gist.github.com/angel-vladov/404de94c5f9703fa462838f77a673446 See: select2#60

rchavik mentioned this issue May 11, 2017

WIP: supports twbs 4-alpha.6 #66

Open

buschmann23 added a commit to Huessenbergnetz/Skaffari that referenced this issue Aug 22, 2017

Add Select2 and Select2 Bootstrap4 theme.

9eeb7bd

See https://select2.github.io and select2/select2-bootstrap-theme#60

angel-vladov mentioned this issue Nov 23, 2017

Bootstrap 4 theme #72

Open

Bootstrap 4 #60

Bootstrap 4 #60

Comments

bangzek commented Feb 16, 2017

RandyBooth commented Feb 17, 2017

RandyBooth commented Feb 17, 2017

achimha commented Feb 24, 2017

jwtoler commented Mar 14, 2017

Alicia-L commented Mar 22, 2017 • edited

jwtoler commented Mar 22, 2017

Alicia-L commented Mar 22, 2017

angel-vladov commented Mar 26, 2017 • edited

jwtoler commented Mar 27, 2017

Alicia-L commented Mar 29, 2017

jwtoler commented Mar 30, 2017 • edited

rileytaylor commented Mar 30, 2017

judetucker commented Apr 6, 2017

edwardmp commented May 2, 2017 • edited

judetucker commented May 2, 2017

judetucker commented Aug 16, 2017

DaleMckeown commented Aug 16, 2017

paulm17 commented Sep 19, 2017

quasipickle commented Sep 19, 2017

paulm17 commented Sep 20, 2017 • edited

DaleMckeown commented Sep 20, 2017 via email

paulm17 commented Sep 20, 2017

DaleMckeown commented Sep 20, 2017

paulm17 commented Sep 20, 2017

husnulhamidiah commented Oct 17, 2017

DaleMckeown commented Oct 17, 2017

paulm17 commented Oct 17, 2017

PascalPixel commented Oct 20, 2017 • edited

Update

jcripo commented Nov 2, 2017

jplaverdure commented Nov 8, 2017 • edited

cknoxrun commented Nov 15, 2017

angel-vladov commented Nov 19, 2017 • edited

odahcam commented Nov 20, 2017

fk commented Nov 20, 2017

PascalPixel commented Nov 21, 2017

fsasvari commented Dec 21, 2017

paulm17 commented Jan 18, 2018 • edited

krystyna93 commented Feb 1, 2018

divdax commented Feb 12, 2018

odahcam commented Feb 12, 2018

paulm17 commented Feb 12, 2018

odahcam commented Feb 12, 2018

angel-vladov commented Feb 12, 2018 • edited

krystyna93 commented Feb 12, 2018

divdax commented Feb 15, 2018

krystyna93 commented Feb 15, 2018

divdax commented Feb 15, 2018

odahcam commented Feb 15, 2018

krystyna93 commented Feb 15, 2018

divdax commented Feb 18, 2018

mkelley82 commented Feb 28, 2018

JavaTMP commented Mar 10, 2018

skn3 commented May 11, 2018

NikoGrano commented May 12, 2018

angel-vladov commented May 13, 2018

Alicia-L commented Mar 22, 2017 •

edited

angel-vladov commented Mar 26, 2017 •

edited

jwtoler commented Mar 30, 2017 •

edited

edwardmp commented May 2, 2017 •

edited

paulm17 commented Sep 20, 2017 •

edited

PascalPixel commented Oct 20, 2017 •

edited

jplaverdure commented Nov 8, 2017 •

edited

angel-vladov commented Nov 19, 2017 •

edited

paulm17 commented Jan 18, 2018 •

edited

angel-vladov commented Feb 12, 2018 •

edited