-
Notifications
You must be signed in to change notification settings - Fork 498
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
Comments
+1 |
@bangzek Here what I found that can use this for now if you use SASS. |
Needs three more lines:
|
Anybody have an issue with multiple select and the selected tags not being vertically centered? |
@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
When that's the case, this number should be multiplied by the font size to obtain the actual line height. So in the
...with this...
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! |
@Alicia-L I tried that but I still getting this: |
@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 {
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 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 Good luck! |
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. @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 NOTE: |
Thanks to @angel-vladov and @Alicia-L ! Works now. |
@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:
with this:
as I had done before. Thanks again! |
@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 |
I also had to add |
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 |
@judetucker thanks but is anyone else running into the issue that the select title is displayed beneath the select box? |
@edwardmp your select2 is not initialized properly. Might not be getting the CSS. check your config. |
Here is the update for the new bootstrap 4 beta! https://gist.github.com/judetucker/77fc1da23a70e9b15c21decd0bf74bec |
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 |
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. |
@paulm17 I just commented on how I got my setup to work. |
@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 |
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>
.
|
@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. |
I've added a seperate, compiled .css file to the gist. https://gist.github.com/DaleMckeown/82995dcc482650f130a708f11a66a2a6 |
@DaleMckeown Many thanks for that, much appreciated! |
@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'
}) |
Sorry, I don't know about Jade. |
@DaleMckeown Just to clarify. This works perfectly for me. Many thanks for that, much appreciated! |
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... UpdateMy 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;
}
} |
very good /* -- Select2 v.4 Bootstrap v.4 -- */ |
There is WAY too much cryptic and contradicting stuff here.. |
@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. |
Can we have BS4 styled labels instead of that gray ones? |
Nice work @angel-vladov! |
Nice job @angel-vladov keep at it 🥇 |
When can we expect the release of bootstrap v4 beta theme ? |
Bootstrap 4 has now been released! When can we expect a v4 theme? Many thanks! |
Yes, please answer as to if this will be compatible with the version Bootstrap 4?? |
+1 Definitely need a Bootstrap 4 Theme! |
@odahcam Except that it's not the final v4. |
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. |
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. |
@odahcam This isn't compatible with the bootstraps final version (v4.0.0)
@krystyna93 you mentioned a plugin that has nothing to do with select2... and the way it works isn't that what select2 offers. |
@divdax Yes, bootstrap-select, specifically this amended version https://github.com/heimrichhannot/bootstrap-select is compatible with the latest bootstrap |
@krystyna93 Maybe it works with bootstrap 4, but this is not what i and other select2 users need... 🤦♂️ |
Well, what do we need to do to put this repo up to Bs4? |
@divdax it was merely a suggestion for anyone who was looking for an alternative. But yes, the tag function is pretty cool. |
@fk Any plans for an update? 😄 |
+1 |
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: We still have few issues that we stated here #72 (comment) |
please update this! |
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. |
Check the PRs. There's a Bootstrap 4 version in development - #72 |
Is there bootstrap 4 version?
The text was updated successfully, but these errors were encountered: