How to change select2 width dynamically after init

Question

I have a kind of info panel on the right side of my apps page. This panel can be resized in width by dragging and moving the border (E.g. Like you can resize the columns in a windows finder) In the panel I have a select2 to search for something. I initialize this select2 with

    let infoPanelSiteId = $('#infoPanelSiteId');
    infoPanelSiteId.select2(
        {
            ajax:
                {
                    dataType: 'json',
                    delay: 250,
                    url: BACKEND_URL + '/infopanel/searchsites.php',
                    processResults: function (data)
                    {
                        return {results: data.data};
                    }
                },
            width: infoPanel.width - 15,
            placeholder: i18next.t('default:infopanel.site.search')
        })
        .on('change', function ()
        {
            let data = infoPanelSiteId.select2('data');
            if (data[0])
            {
                data = data[0];
                InfoPanel.setInfoPanelSiteById(data.id);
            }
        });

Now if the user resizes the info panel the select2 is not resizing because it has a fixed width. Problem is, that the display of the panel is using display: table and display: table-cell which is necessary on other purposes. So I cannot work with width: 100% or width: auto because a table cell does ignore a css width.

So I look for a possibility to change the inlined width in the select2 container

select2 select2-container select2-container--default select2-container--below

I tried it with

$('#infoPanelSiteId').next().css('width' : (infopanel.width -10) + 'px !important');

and

$('.select2-container--below').css('width' : (infopanel.width -10) + 'px !important');

but that does not work.

Any suggestions?

Edit:

Here is a fiddle how it should work but it doesnt

https://jsfiddle.net/wazrdky2/

Frenchy · Accepted Answer

if you want to change the width when the class select2-container--below appears do that: (event open and close)

$('#yourselect2ID').on('select2:open', function (e) {
   $("body > span.select2-container--below").css("width", "600px");
});

$('#example').select2();



$('#example').on('select2:open', function (e) {
   $("body > span.select2-container--below").css("width", "100px");
});

$('#example').on('select2:close', function (e) {
   $("body > span.select2-container--below").css("width", "300px");
});

//$('#example').select2({dropdownCssClass : 'bigdrop'});

.bigdrop {
    width: 100px !important;
}

or you could use Custom CSS style like this:

$('#yourselect2ID').select2({dropdownCssClass : 'bbbdrop'});

.bbbdrop {
    width: 100px !important;
}

$('#example').select2({dropdownCssClass : 'bigdrop'});

.bigdrop {
    width: 100px !important;
}

you could mix both:

$('#example').select2({dropdownCssClass : 'bigdrop'});

$('#example').on('select2:open', function (e) {
   $("body > span.select2-container--below").css("width", "100px");
});

$('#example').on('select2:close', function (e) {
   $("body > span.select2-container--below").css("width", "300px");
});

.bigdrop{
    width: 100px !important;

}

if you want dynamically set the width of select2, without reinitializing it: (change the selector)

    let width = 300;
    
    let infoPanelSiteId = $('#infoPanelSiteId');
        infoPanelSiteId.select2(
            {
                
                width: "resolve",
                placeholder: 'Placeholder'
            })
            .on('change', function ()
            {
            });

    let interval = setInterval(() =>
  {
    width +=10;
    
        $(".infopanelPanel span.select2-container").css("width", width + "px");
    if(width == 500)
        clearInterval(interval);
  }, 500);

How to change select2 width dynamically after init

Answers (1)

Related Questions