select2/select2-bootstrap-theme

Adding .input-sm class, no effect

bilalhdh opened this issue · 8 comments

bilalhdh commented

Hi,
when adding .input-sm class to the select, style not change and it kept same height so no effect.
Thanks

bartczyz commented

Same here. :(

fk commented

Hey there! I am returning from a longer open source/Select2 hiatus and still not up-to-date with the current state of Select2 development in regards to this issue – maybe @kevin-brown can chime in.

The last I know is that

Select2 no longer copies classes to the dropdown and container

(ref. kevin-brown's comment) – this information is reflected in this note in select2-bootstrap-theme's demonstration pages.

fk commented

Small update: I took a closer look and found that if you include the full Select2 build – select2.full.js – you can set the containerCssClass option to :all: to copy the original elements CSS-classes to the select2 container.

I have set up a CodePen to show what it does: The original elements CSS-classes are added to span.select2-selection. However, this is not what select2-bootstrap-theme currently expects – which is that those classes are added to span.select2.select2-container.

@kevin-brown Should I look into rewriting the select2-bootstrap-theme CSS to support the current behavior of containerCssClass: ':all:'?

kevin-brown commented

@kevin-brown Should I look into rewriting the select2-bootstrap-theme CSS to support the current behavior of containerCssClass: ':all:'?

Yes, this is the expected behaviour of containerCssClass.

fk commented

@kevin-brown & all: I have this fixed (as in "rewrote the CSS to fit the expected behavior of containerCssClass) but untested in anything but Chrome, sitting in a local branch for three weeks now – but can't get around to free some time to test and merge. Please bear with me.

matiazar commented

I have applyed this... my select now is small in size, but it doesn't open.
Also if I dont put input-sm on my select, and I put this on select2 config
containerCssClass: ':all:',
it doesnt works. The select is not opening.

What can it be?

Im using Select2 4.0.3
and Css 0.1.0-beta.8

matiazar commented

I have found the problem... my select has a class called "select2"
so when document loads
$(".select2").select2({
width: '100%',
placeholder: function(){
$(this).data('placeholder');
},
containerCssClass: ':all:',
});
it copies the select2 class to the container and that makes all broken.
there is another way to make this without the :all: class ?

on your examples page, this is not happening. Why ? Thanks !!!