t0m / select2-bootstrap-css Goto Github PK

Why can i not use createSearchChoice on a <select> to create new <option>?

No, i do not want to use another input.

When u use bower-install for grunt in modules in bower.json there must be defined "main"
Need add:
"main": "select2-bootstrap.css",

For Bootstrap3 branch, suggestion to remove left border that appears between the select and the arrow when the select dropdown is collapsed. It disappears when the select is opened anyway and it is not found in the bootstrap select element.

Hey t0m,

Just an FYI, people who use package managers like bower or any other package/dependency manager that looks for specific git tags for every release are missing out on the 1.3.0 release on the bootstrap3 branch. There is no tag in @fk's repo either.

I ended up forking the repo and creating the tag from t0m's 1.3.0 commit on the bootstrap3 branch. Just thought I'd let you two know.

Thanks for your contribution!

If I remove line 28 in select2.css problem is resolved.

It's happening only when you resizing screen.

Multiple select

Regular select

I try to add image template to select2, but it have problem.

See https://github.com/twbs/bootstrap-sass#sass-number-precision – with Sass' default precision of 5, $line-height-base gets computed as 1.42857, which causes the text of .select2-choice to be one pixel off vertically:

It should be 1.42857143:

How do i set a value (JSON data from SQL) default selected?
How do we set the Tabindex?
How do I validate using Jquery Validate?

Hello,

Just to notify you: http://t0m.github.io/select2-bootstrap-css/ i got 404s for select2.js & css

Hi Tom,

Could you please upload the NuGet package for this project to v1.3.

Cheers

NuGet Uninstall completely removes Select2 and Bootstap.

Since Sass v3.4.x, sourcemaps are now generated by default when using the sass or scss executables and when using Sass as a plugin.

This results in an error when trying to compile the master branch select2-bootstrap-css Sass sources:

Error: Error generating source map: couldn't determine public URL for the source stylesheet.
         No filename is available so there's nothing for the source map to link to.
        on line  of standard input
  Use --trace for backtrace.
Warning: Error: Error generating source map: couldn't determine public URL for the source stylesheet.
         No filename is available so there's nothing for the source map to link to.
        on line  of standard input
  Use --trace for backtrace. Use --force to continue.

Up to 6aeb845, select2-bootstrap.css used in the demos for the Bootstrap 2 version was not updated to contain the changes from #26.

Here's before #26 …

… and after:

Seeing these changes for the first time makes me think that – while I agree with the changes regarding border-color – box-shadow shouldn't have been altered; it causes more problems than it solves.

Let's change that box-shadow back to the neutral default select2.css one (just like we do in the bootstrap3 branch).

Sorry, I have found a second bug with the newest version, if you use your select2 bootstrap theme within a bootstrap addon sceneraio with a prepend and append to the select2 box, then no arrow appear in the select box (Everything working fine, only a design bug)

Kind regards

RubyGems.org doesn't report a license for your gem. This is because it is not specified in the gemspec of your last release.

via e.g.

spec.license = 'MIT'
# or
spec.licenses = ['MIT', 'GPL-2']

Including a license in your gemspec is an easy way for rubygems.org and other tools to check how your gem is licensed. As you can image, scanning your repository for a LICENSE file or parsing the README, and then attempting to identify the license or licenses is much more difficult and more error prone. So, even for projects that already specify a license, including a license in your gemspec is a good practice. See, for example, how rubygems.org uses the gemspec to display the rails gem license.

There is even a License Finder gem to help companies/individuals ensure all gems they use meet their licensing needs. This tool depends on license information being available in the gemspec. This is an important enough issue that even Bundler now generates gems with a default 'MIT' license.

I hope you'll consider specifying a license in your gemspec. If not, please just close the issue with a nice message. In either case, I'll follow up. Thanks for your time!

Appendix:

If you need help choosing a license (sorry, I haven't checked your readme or looked for a license file), GitHub has created a license picker tool. Code without a license specified defaults to 'All rights reserved'-- denying others all rights to use of the code.
Here's a list of the license names I've found and their frequencies

p.s. In case you're wondering how I found you and why I made this issue, it's because I'm collecting stats on gems (I was originally looking for download data) and decided to collect license metadata,too, and make issues for gemspecs not specifying a license as a public service :). See the previous link or my blog post about this project for more information.

Hello,

I'm trying to use the "input-append" control from Bootstrap with Select2 but the appended button is shown very distant from the Select2 component.

Here is the Fiddle reproducing the problem: http://jsfiddle.net/JRjcY/.

I would be very nice to support this use case.

First of all, thanks for putting this up! Great effort!

I tried using this with v4.0.0-rc.2 and it seems that the markup as well as classes differ significantly. I know its still in RC but do you have any plans or have you started adding support for v4?

Says 1.0.0, should be 1.2.4.

How much select not displayed exactly?
Browser: Google Chrome 39.0.2171.95 m
Screen resolution: 1920x1080px

Hi,

i input-sm class i see overlapped border in your demo. how do can i fix this?

demo:

When the selection area does not have enough space to display under the input, it goes above.
In this case, the style has not been changed, and looks like select2 instead of bootstrap

Hi,

first of all, thanks for your great work!
But in my opinion if found a bug, because you use background: none, the select box look different on each background, which looks a littlebit ugly.

I have a white page and on that page is a bootstrap "well" in which I use a select2, now this select2 have grey background and select2 boxes under that "well" have a white background, for me they should all look the same, white in that case.

A nice new feature would be if I would have the possibility to enable the bootstrap theme on a select2 with an option or so, so that I can use both styles on one page.

Kind regards

On select2-bootstrap.scss file, I get undefined variable $baseLineHeight.

@includes point to ../components, should point to ../bower_components.

I tried to register but there was a format issue. Just thought I'd mention. Cheers and thanks for the great repo.

Problem: When you select an option that is larger than the Select2, the control would expand itself to fit the newly selected option, even if it means exceeding the width of the parent container.

Expected outcome: If the selected option is large, then the text content should become clipped and text ellipsis should be visible.

You can see this in the demonstration website if you manually adjust any of the Select2 controls width to an arbitrary small value and then proceed to selecting any options.

Hi,

Do you planning to support bootstrap 3?

Thanks

This is the best solution for implementing select2 in bootstrap I've seen until now!

Unfortunately it doesn't allow yet for the responsive functionality of Bootstrap. Would it be possible to add that, so that when screen-width is max. 767px, the multiselect container gets a 100% width?

I added the css to my page in that order:
bootstrap.css
select2.css
select2-bootstrap.css

I followed the examples exactly as on the demo page: <select class="select2 form-control"> I'm calling $(".select2").select2() without any options. It still displays the default select2 styles.

All examples at https://fk.github.io/select2-bootstrap-css/index.html don't do anything as they cannot find select2.js and select2.css files.

The bootstrap 3 select2-bootstrap.css has a comment that says:

/**
 * Address Bootstrap's validation states and change Select2's border colors and focus states.
 * Apply .has-warning, .has-danger or .has-succes to #select2-drop to match Bootstraps' colors.
 */

If I apply .has-error to .select2-drop it doesn't work quite right:

The border of the drop changes to red, but the upper part...the part above the Select2 search box...which has the class .select2-container stays the standard bootstrap blue.

If I move the section of css dealing with the validation states below the section dealing with active states, it then works.

When placing a select2 next to a bootstrap input-prepend addon, the select2 is not styled properly. It needs:

• no rounded corners on the left side (right side for input-append)
• same height and padding as the add-on

For this, with default bootstrap variables I am using this css:

.input-prepend .select2-container .select2-choice{
    font-size:14px;
    line-height:20px;
    height:20px;
    padding-top:4px;
    padding-bottom:4px;
}

.input-prepend .select2-container .select2-choice{
    border-radius: 0 4px 4px 0;
}

In terms of bootstrap variables, the 14px and 20px are clearly @baseFontSize and @baseLineHeight.. not sure what the 4px padding I found by trial and error should be defined as...

As far as I can tell, the colour of a focused input's box-shadow is hardcoded to rgba(82, 168, 236, 0.6).

With bootstrap.less, you can modify the colour with @input-border-focus. Would it be possible to add this functionality?

I modified it in the following way for my project, but do not know this project and LESS well enough to know if this is a safe change:

.select2-container-active .select2-choice,
.select2-container-multi.select2-container-active .select2-choices {
  @color-rgba: rgba(red(@input-border-focus), green(@input-border-focus), blue(@input-border-focus), .6);
  border-color: @input-border-focus;
  outline: none;
  @shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px @color-rgba;
  .box-shadow(@shadow);
  @transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  .transition(@transition);
}

When downloading using bower, this install creates a subfolder like:

bower_components/select2-bootstrap-css-1.4.6/

When visiting the demo page, the CSS & JS don't get loaded because it's requesting the file over http. Relevant lines:

https://github.com/t0m/select2-bootstrap-css/blob/bootstrap3/_jekyll/_includes/head.html#L6

that line should be:

  <link rel="stylesheet" href="//ivaynberg.github.io/select2/select2-{{ page.version }}/select2.css">

and

https://github.com/t0m/select2-bootstrap-css/blob/bootstrap3/_jekyll/index.html#L63-L64

these lines should be:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ivaynberg.github.io/select2/select2-3.4.2/select2.js"></script>

Here's what the demo page looks like when using https:

http://cl.ly/WyqK

Please, excuse my laziness, how can I get default selected items rendered on page load in multiple select widget?

Am i doing something wrong? Or is it because v3.5.2 is not supported?

http://jsfiddle.net/fx0s0no1/

Hi!

First of all... thanks for your work.

I'd like to know if you wil adopt some tag system to control what version is your project.

I'm using it and I confess to you that is hard to know if a should or not update my files.

Thanks again.

When you use select2 with a spanX class, it is generating a unexpected left margin.

For example:

http://jsfiddle.net/Cezinha/gxXdb/

the select2 height is smaller than default of bs3
when i set

.select2-container .select2-choice {
    height: 38px;
    line-height: 1.82857;
}

It is OK.

This is directed specifically to @fk

Are you the publisher of https://www.npmjs.org/package/select2-bootstrap-css and (if so) do you have plans to keep your branch here published on npmjs.org?

If there is an addon to the left there should be no border-radius on the left corners and on the right if the input addon is on the right.

Please add copyright statement to select2-bootstrap.css. Thanks.

https://github.com/ivaynberg/select2/issues/942
https://github.com/ivaynberg/select2/issues/1645

Is this issue solved in this select2-bootstrap-css component?

Hello,

It may seem as a beginner question, sorry about that.
I use MopaBootstrapBundle for integrating bootstrap into the Symfony2 framwork.
This bundle contains the .less files from bootstrap.
Basically, I have a custom less files that integrates the bootstrap less files.

I don't really know how I can integrate your less files within this context...

Thank you for your help!

We'll need this for cdnjs; see #61.

Hi!
I'm using Jquery UI bootstrap (with non-bootsrap file select2.css) and when i change my non-bootstrap css to yours, my select2 collapses.
Are you going to create css-file that work without bootstrap?

Hey fk/t0m,
select2 is in new 4.0 beta. Still not finished but i'm very exited if you will make an update to this. Select2 now supports a special theme option. May this becomes very handy ;)

Regards
Nyro