Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bootstrap 4 #60

Open
bangzek opened this issue Feb 16, 2017 · 55 comments
Open

Bootstrap 4 #60

bangzek opened this issue Feb 16, 2017 · 55 comments

Comments

@bangzek
Copy link

bangzek commented Feb 16, 2017

Is there bootstrap 4 version?

@RandyBooth
Copy link

+1

@RandyBooth
Copy link

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

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

@achimha
Copy link

achimha commented Feb 24, 2017

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
Copy link

jwtoler commented Mar 14, 2017

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

@Alicia-L
Copy link

Alicia-L commented Mar 22, 2017

@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
Copy link

jwtoler commented Mar 22, 2017

@Alicia-L I tried that but I still getting this:
screenshot 2017-03-22 10 00 24

@Alicia-L
Copy link

@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
Copy link

angel-vladov commented Mar 26, 2017

@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
Copy link

jwtoler commented Mar 27, 2017

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

@Alicia-L
Copy link

@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
Copy link

jwtoler commented Mar 30, 2017

@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
Copy link

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
Copy link

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
Copy link

edwardmp commented May 2, 2017

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

schermafbeelding 2017-05-02 om 02 35 09

@judetucker
Copy link

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

@judetucker
Copy link

Here is the update for the new bootstrap 4 beta!

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

@DaleMckeown
Copy link

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
Copy link

paulm17 commented Sep 19, 2017

@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
Copy link

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

@paulm17
Copy link

paulm17 commented Sep 20, 2017

@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
Copy link

DaleMckeown commented Sep 20, 2017 via email

@paulm17
Copy link

paulm17 commented Sep 20, 2017

@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
Copy link

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

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

@paulm17
Copy link

paulm17 commented Sep 20, 2017

@DaleMckeown Many thanks for that, much appreciated!

@husnulhamidiah
Copy link

@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.
Image of Yaktocat

@DaleMckeown
Copy link

Sorry, I don't know about Jade.

@paulm17
Copy link

paulm17 commented Oct 17, 2017

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

Image

Many thanks for that, much appreciated!

@PascalPixel
Copy link

PascalPixel commented Oct 20, 2017

screen shot 2017-10-20 at 16 26 48

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:
screen shot 2017-10-23 at 15 13 37

@jcripo
Copy link

jcripo commented Nov 2, 2017

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
Copy link

jplaverdure commented Nov 8, 2017

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
Copy link

@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
Copy link

angel-vladov commented Nov 19, 2017

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
Copy link
Contributor

odahcam commented Nov 20, 2017

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

@fk
Copy link
Member

fk commented Nov 20, 2017

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

@PascalPixel
Copy link

Nice job @angel-vladov keep at it 🥇

@fsasvari
Copy link

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

@paulm17
Copy link

paulm17 commented Jan 18, 2018

Bootstrap 4 has now been released!

When can we expect a v4 theme?

Many thanks!

@krystyna93
Copy link

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

@divdax
Copy link

divdax commented Feb 12, 2018

+1

Definitely need a Bootstrap 4 Theme!

@odahcam
Copy link
Contributor

odahcam commented Feb 12, 2018

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

@paulm17
Copy link

paulm17 commented Feb 12, 2018

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

@odahcam
Copy link
Contributor

odahcam commented Feb 12, 2018

I see no problems with that.
image

@angel-vladov
Copy link

angel-vladov commented Feb 12, 2018

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
Copy link

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
Copy link

divdax commented Feb 15, 2018

@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
Copy link

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

@divdax
Copy link

divdax commented Feb 15, 2018

@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
Copy link
Contributor

odahcam commented Feb 15, 2018

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

@krystyna93
Copy link

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

@divdax
Copy link

divdax commented Feb 18, 2018

@fk Any plans for an update? 😄

@mkelley82
Copy link

+1

@JavaTMP
Copy link

JavaTMP commented Mar 10, 2018

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
Copy link

skn3 commented May 11, 2018

please update this!

@NikoGrano
Copy link

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests