Responsiveness

[vanhoutenbos]

Hello,

I thought bootstrap is created to make websites responsive, but this plugin doesn't fix the responsiveness issues at all. It does style it to a nice bootstrap looking button but without the responsiveness its useless.

Could this be implemented.

[psohm]

well it is strange. when we change the size of the window, it doesn't readapt but if we refresh the page it has the good size ..

[Jean-PaulvHouten]

Exactly, its kinda strange, since there is code made for responsiveness, but it doesn't seem to work dynamicly. (I am logged in on my work account now, same guy as who asked the question though)

[rtsalamone]

Quick Hack that may help someone else until this is fixed:

$(function(){
setTimeout(function() {
$('span.select2-container.select2-container--bootstrap').width('100%');
}, 1000);
});

Since there doesn't seem to be an "initialized" event to hook into, I'm waiting one second after doc ready to set the spans with to 100%, which makes them responsive.

As I said, it's a total hack, but it will let you at least demo the thing!

[ecmel]

If I construct the select2 as per the examples, it works out of the box:

$.fn.select2.defaults.set("theme", "bootstrap");
$("#single").select2({
  width: null
});

Is this bug still valid?

[klarkc]

The bug still occurs, the @ecmel workaround works

Another way, to disables the width parameter by default:

$.fn.select2.defaults.set("width", null);

[onebree]

I am using select2 4.0.3, and select2-bootstrap 0.1.0-beta.6

Can confirm that this bug still exists.

[nunesvictor]

this workaround fixes the issue:

// select2.init.js
$.fn.select2.defaults.set("theme", "bootstrap");
$.fn.select2.defaults.set("width", null);

$(document).ready(function () {
    $('select').select2();
});

using: select2 4.0.1 and select2-bootstrap 0.1.0-beta.10

[larigyn]

sir, It overlaps.

[demedos]

Here's what fixes it for me. Basically, just reset the select's parent container width after initializing it

$(function() { 
  $('#controlID').select2({ theme: 'bootstrap' }); 
  $('#controlID').parent().find('.select2-container').css('width', '');  <-- This part here
});

The theme shouldn't give a fixed with on this element though