Bootstrap 3 Support

[ecabuk]

Hi,

Do you planning to support bootstrap 3?

Thanks

[michaek]

Certainly, but I haven't looked into it yet.

[jcspader]

I'm also awaiting

[cgardner]

I am also interested in Bootstrap3 support

[michaek]

Can we avoid doing +1 style responses to this? Thanks!

[fk]

We recently began a project using Twitter Bootstrap 3 RC1 in which we also make (albeit very basic) use of select2 to extend the functionality of a bunch of multi-value select-elements.
While trying to adjust select2's default styles to match Bootstrap I stumbled upon this fine project and am happy to report that I didn't find any major problems concerning Bootstrap 3 – just the line-height for select2-container-multi .select2-choices .select2-search-field was causing problems (in Google Chrome only as far as I can remember).

Being at home with a bit of a cold right now I thought I'll give a full update a shot but I ran into several problems while trying to support all use cases featured on the demo pages – namely the "Select2 custom data load" example and the sizing demonstrations – but the basic stuff is mostly done.

If you want to check out what I got so far, head over to https://github.com/fk/select2-bootstrap-css.
To easily review my changes, I did the main work in the "gh-pages"-branch: https://github.com/fk/select2-bootstrap-css/commits/gh-pages – and here's the demonstration: http://fk.github.io/select2-bootstrap-css/

[rohitdev]

@fk did not work for me.All the componets are misaligned

[fk]

@rohitdev The repository was really messy for the last 1,5 days – I somehow missed looking into what actually goes on in the master-branch and started hacking away in the gh-pages-branch, so if you tried to use the CSS from master it most probably wasn't up-to-date. Sorry for that.

Please give the demos at http://fk.github.io/select2-bootstrap-css/ another shot; this is still a work in progress, but it should be usable by now. Will do my best to update the demos with some documentation the next few days.

[michaek]

One reason that I haven't taken on the changes necessary to support Bootstrap 3 is that I don't want to sacrifice support for Bootstrap 2.3. There are plenty of good reasons to choose not to move to Bootstrap 3 from Bootstrap 2.

If we can maintain support for Bootstrap 2 along with visibility for Bootstrap 2 in the demos, I think the changes from @fk are definitely worth considering. However, considering the number of commits and amount noise in that repo, I don't think a pull request without some aggressive rebasing would make sense.

[fk]

@michaek Thanks for the nice words! You're definitely right about the noise – when I started hacking away in the gh-pages branch, I lay in bed with 39° temperature and this shows in structure, underestimating the job and procrastinating. As stated in my previous comment I initially didn't even took a look into the master-branch – a big mistake. If I only had taken a moment to understand how the master-branch works, I'd at least been working in a feature-branch … surely not one of my finer git(hub)-moments. :/

That said, I've been wanting to get back to you and @t0m regarding my work for Bootstrap 3 – I'd be more than happy to contribute back!

I've been working on integrating Bootstrap 3's control sizing and validation states today and am hoping to fix things for IE8 in the next 24 hours.

[michaek]

Let me know when you're happy with what you've got, I'll take a look, and we can work on getting your changes into this project.

[lohmeyer]

@michaek

Great news! Coming back soon ... ;)

[fk]

@michaek I might be a few hours late, but I'm quite happy with what I got so far: All major browsers (tested in latest Chrome, Safari, Firefox, Opera (Mac) and IE8-IE10), Select v.3.3.2, backporting Sass to LESS and basic use cases are covered and only a few bugs remain.

What do you think about the open stuff – are these showstoppers regarding contributing back/releasing?

I will definitely take a look at these in the future (and I'd also like to improve the inline CSS documentation a bit, among other things) but as I'll be quite occupied with catching up at work for the next few days maybe it's best to run with what I got so far (my English su**s today, I hope I can get my point across).

[SharpNoiZy]

@fk
I tried your bootstrap 3 branch and it looks already very good!
But I found one litte issue.
On a single select scenario if I click on the select and the popup is shown and I don't choose any item, instead I click somewhere on the page the blue highlight border stays around the input field.

Kind regards

[lohmeyer]

@SharpNoiZy

true, the same happens for me. But I can live with it ...

[fk]

@SharpNoiZy @lohmeyer Yep, I also noticed that – seems it's a bug introduced with select 3.4.0 which according to this issue should be fixed in select2-master.

However, the demo at http://ivaynberg.github.io/select2/select2-latest.html#basics still shows the faulty behavior (.select2-container-active not being removed) – if I'm not mistaken; I only took a very quick look at this. I'll have access to my dev box at the end of the coming week and will look into this again.

[ekarlso]

Is there any news on this? I want to use this for the OpenDaylight UI project.

[cesarjr]

+1 waiting for :-)

[michaek]

Please - no more +1s. I will definitely be more likely to close this as wontfix if it seems like folks are nagging me to do something that I've already explained is not a high priority.

[east2dd]

I really want to select2 for bootstrap3

[jcspader]

There is another project that develops into the framework bootstrap v3!!! \0/

http://fk.github.io/select2-bootstrap-css/master.html
https://github.com/fk/select2-bootstrap-css

[michaek]

@jcspader Thank you for reminding the hasty commenters about @fk's work, described above.

[jcspader]

@michaek I have to agree with them.
Unfortunately your library became incompatible with the release of bootstrap v3.

How are you a reference, I think you should give attention to this.

[andrewshkovskii]

It is not became outdated, it's still only for bootstrap 2. I think there is two ways :
1 - Create branch for bootstrap v3.
2 - Left this project for v2, and create link to v3 in description.

[DmitryEfimenko]

+1 Any update on this?

[cesarjr]

I'm using this:

https://github.com/fk/select2-bootstrap-css

It's working perfectly.

[jonira]

+1

[GrahamCampbell]

+1

[nguyenchiencong]

+1

[raulgomis]

+1

[paul-english]

+1, You should listen to the community, else lose support. Using the branch by @fk

[fk]

@pavolzbell The screenshot I posted shows the current Select2 demo page.

[nickl-]

Merge the projects and submit pull requests to make fixes all you are doing now is forking the efforts and confusing the hell out of everyone.

What seems to be the hold-up?

[fk]

@nickl- Wow! Thanks for the rebase!

Why the hold-up? Mostly because my father was in and out of intensive care for all of November, being hospitalized since early October (see my comment here); but also because this issue is labeled wontfix and I never heared back from either @t0m or @michaek.

While the latter isn't an excuse not to rebase/issue a pull request (and by no means is meant to blame the guys I just mentioned), I was really unsure if a simple rebase would do – I recall I changed the build-process a bit because I couldn't get the original one to work on my machine, was confused about the Gemfile-stuff and how to best deal with the Bootstrap 2 version and its demos, thus I seeked feedback from the project owner/maintainer.

It's only now and thanks to your comment that I realize that a pull request, no matter how good or bad, could have served as a base for discussing the worries I just mentioned.
Thanks again for helping, let's hope this somehow works out!

[nickl-]

@fk Please confirm that the PR was successful as you are in a better position to do the assessment. Ideally this should only incorporate the needed changes for BS3 and not changing the supporting files, what do you think?

What I meant by what the hold up is was not so much an enquiry about availability but rather questioning if anything in particular is preventing this from being completed, especially now that we have the rebased and green to merge PR.

I will give you write access to my repo and anything you push to the fk-bootstrap3 branch will be included on the PR so please feel free to make yourself at home. This is really the only way to see this to completion so lets get it done.

Others can submit PRs to branch fk-bootstrap3 at nickl-/select2-bootstrap-css and myself or fk will merge your contributions.

[stephenpatten]

Does anybody take the time to read the comments? @michaek mentioned a number of times to not jump on the bandwagon and do the +1 ... serves us right if he doesn't support BS 3 any time soon.

[t0m]

Hey guys, sorry for being an absentee maintainer but I've had zero time to put into this for the past six months and for the foreseeable future unfortunately. I've made a bootstrap3 branch with @nickl-'s rebase of @fk's code and added both as collaborators. Thanks for your help!

My familiarity with bootstrap ended with v2 but v3 looks like a massive overhaul so it may make sense to make a separate repo once the branch is stable and have this repo for v2.x only to avoid confusion.

[nickl-]

@t0m Thanks for all your efforts! You r0x! =)

[nickl-]

Resolved as per cd5014b

[fk]

Thanks @t0m and especially @nickl- - very happy to see things progressing.

Sorry for not responding - my father's health got even worse and I'm happy he's still alive (in between christmas and the first week of the new year he managed to beat death three times in a row (#, lost his kidneys, #).

I'm slowly returning to "real life"/work and will take a look at the new branch at the weekend and make sure I clean up my fork to point people in the right direction.

[nickl-]

@fk our thoughts are with you and your family... take all the time you need.

[fk]

Thanks @nickl- – happy to report that apart from some gh-pages related files (which I just cleaned up in f15c399), everything was/is fine in the bootstrap3 branch.

+1 for @t0m and

[…] v3 looks like a massive overhaul so it may make sense to make a separate repo once the branch is stable and have this repo for v2.x only to avoid confusion.

– especially since I just chimed in on #16 (even though labeling issues according to the Bootstrap version they affect might be an option, there's still the demo pages and the Gem).

[nickl-]

We should just be cautious not to split the community, I am happy to use one repo and split branches, if that means the community stays at home. We don't need gh_pages for both versions just the latest. We can still accept PRs on bootstrap2 but keep new features on the v3 branch.

Thoughts?

[nifr]

👍 for the v3 branch

[nickl-]

Thank you @nifr for your participation and for setting an example. This is the importance of community and how we make decisions as a collective through consensus.

Interesting perhaps to note that it is generally only required to express disagreements as decisions are deemed having support of the community when adequate time has elapsed (72 hours for some) in absence of any negative votes.

This follows the premise that you don't have time to respond to every issue but you should respond when you disagree. We should therefor be equally grateful to those who make the effort regardless. It may seem like a trivial gesture but no community will exist without.

Kudos!

[rzschech]

@fk can you enable issues on your Bootstrap 3 fork?

I've spotted an issue where if the drop down is above the chooser then there is a grey gradient coming from the select2.css rules:
.select2-container.select2-drop-above .select2-choice {...}
.select2-dropdown-open.select2-drop-above .select2-choice,
.select2-dropdown-open.select2-drop-above .select2-choices {...}

Adding "background: $btn-default-bg;" to your select2-bootstrap.scss rule:
.select2-dropdown-open.select2-drop-above [class^="select2-choice"] {...}

fixes the issue.

[rzschech]

@fk also when the dropdown is above the bottom corners of the chooser are square rather than rounded. Changing your selector:

.select2-dropdown-open [class^="select2-choice"] {
  @include border-bottom-radius(0 !important);
}

to:

.select2-dropdown-open:not(.select2-drop-above) [class^="select2-choice"] {
  @include border-bottom-radius(0 !important);
}

Fixes the issue.

[fk]

@rzschech Thanks so much for reporting these and providing the fixes!
Have you checked the fix for the second issue using :not in IE8 and IE9? Both Bootstrap 3 and Select2 support those (esp. IE9), so I think we should, too – although that specific issue would be bearable to exist in those browsers, I don't know if the updated rule will break anything else regarding those two. I haven't got the styles in question in mind (but was aware of the issue ;-)) – I think I mention "consistent round corners somewhere in the readme).

As for enabling issues in my fork – I could, but I think I shouldn't: I agree with @nickl- that the community shouldn't be split.

Thanks to @nickl- and @t0m (see here) my work is now available as part of the original/this project in the "bootstrap-3" branch.

@nickL @t0m @michaek As for issues, we could track them here and add a reference to the bootstrap-version via a label ("bootstrap 3", "bootstrap 2")? I'm unsure if I got the permissions to do that but will check.
Still unsure about the gem and the demo page though. In general, I'm willing to take over some responsibilities here, but please bear with me – this is my first github project with more than myself as a developer (and consumer). :/

I'll update my forks readme and demo tonight to point out the development freeze over there/the relocation into the "bootstrap-3" branch of the original project.
I'll also take a look at your fixes @rzschech.

[rzschech]

@fk No problem, I'm happy to help.

You are correct :not doesn't work in IE8 and IE9. The only other option is to do something to recompute the bottom border radius based in the input size which is pretty verbose:

.select2-container .select2-dropdown-open.select2-drop-above [class^="select2-choice"] {
  border-bottom-radius: $border-radius-base;
}
.select2-container.input-sm .select2-dropdown-open.select2-drop-above [class^="select2-choice"] {
  border-bottom-radius: $border-radius-small;
}
.select2-container.input-lg .select2-dropdown-open.select2-drop-above [class^="select2-choice"] {
  border-bottom-radius: $border-radius-large;
}

It's good that the you are working to prevent the community from splitting.

[nickl-]

@rzschech Tx for the help you rock!

[reypm]

@fk will you add support for newest TB 3.2? I'm working with this version and components are miss aligned again, can you take a look?

[fk]

@paquitodev Yes, a version built upon Bootstrap 3.2.0 is already in my fork (since yesterday: fk@7110978 ;)) – expect an update in the official "bootstrap3" branch over here in the next few hours.

[raulgomis]

great!

[reypm]

@fk Although docs said "* Compatible with Select2 3.3.2, 3.4.1, 3.4.2 and Twitter Bootstrap 3.0.0" (you should update it to reflect 3.2.0 instead for dummies) and commit message said "
Build select2-bootstrap-css on Twitter Bootstrap v3.2.0" I'm still having issues as image shows:

What I did was include Select2 from CDN (https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.min.js) and download and include your CSS file, any advice? Where I can find, at least, 3.4.2 Select2 version?

[fk]

I just released v1.4.0 of (the bootstrap3 branch of) select2-boostrap-css and also updated the bootstrap3 demo pages. 1.4.0 is built upon Twitter Bootstrap v3.2.0 – v1.3.1 was based on Bootstrap v3.0.0.
Despite the minor version increment, mostly color values changed.

@paquitodev Thanks for the heads up regarding the version numbers; they are fixed in both readme and select2-boostrap.css – plus the latter now also contains the current select2-boostrap-css version number.
Sorry to see you having problems. Both versions should work fine with Select2 v3.4.2, so my guess is that you just might miss https://ivaynberg.github.io/select2/select2-3.5.0/select2.css?
Feel free to prepare a JSFiddle and I'll take a look.

[reypm]

@fk Thanks for that new release, you're right I was missing select2.css I've include and now it works and I can confirm that I'm using Select2 3.5.1 so you can add this one to the version on your demo page, also as a suggestion make 3.0 the master branch

[fk]

select2-bootstrap-css#bootstrap3 v1.4.1 is here.