search

select2 / select2-bootstrap-theme

A Select2 v4 Theme for Bootstrap 3
https://select2.github.io/select2-bootstrap-theme/
MIT License
871 stars 498 forks source link

Demonstration page completely broken #9

Closed kvikram1988 closed 9 years ago

kvikram1988 commented 9 years ago

http://fk.github.io/select2-bootstrap-theme/ completely broken. When is it expected to be fixed, any idea??

1uba commented 9 years ago

+1

kevin-brown commented 9 years ago

It looks like part of the issue is that .select2-hidden-accessible does not use !important when it should, so Bootstrap's styles are making it visible. But only sometimes...

kvikram1988 commented 9 years ago

Yeah, either we can use !important or increase the specifitivity of the class.

fk commented 9 years ago

This somehow happened with Select2 moving from 4.0.0-rc.2 to 4.0.0. Duplicate of #8.

fk commented 9 years ago

It looks like part of the issue is that .select2-hidden-accessible does not use !important when it should,

@kevin-brown Shouldn't !important be part of the default CSS for .select2-hidden-accessible then?

Select2 v3.5.2 added .select2-offscreen to the original <select> element, which has the !important that v4.0.0's .select2-hidden-accessible is currently missing. Select2 v4.0.0-rc.2 added a style="display: none;" instead of .select2-hidden-accessible to the original element – that's why things were working with Select2 v4.0.0-rc.2/before the final release of v4.0.0.

so Bootstrap's styles are making it visible. But only sometimes...

"Only sometimes": When Select2 is inside a .input-group, Bootstraps CSS will be more specific than the styles for .select2-hidden-accessible:

.input-group .form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
}

A temporary fix as mentioned above is to either add !important to .select2-hidden-accessibles position: absolute …

.select2-hidden-accessible {
    position: absolute !important;
}

… or to explicitly target .form-control.select2-hidden-accessible …

.form-control.select2-hidden-accessible {
    position: absolute;
}

… or to simply remove .form-control from the original <select> element.

kevin-brown commented 9 years ago

@kevin-brown Shouldn't !important be part of the default CSS for .select2-hidden-accessible then?

Yes. Pull requests to select2/select2 are always encouraged.

Specifically...

... all need !important added to them.

fk commented 9 years ago

Yes. Pull requests to select2/select2 are always encouraged.

OK will do, give me a few hours. Do you know anything that speaks against adding !important to all rules in .select2-hidden-accessible as v3.5.2 did for .select2-offscreen?

fk commented 9 years ago

@kevin-brown Pull request here.