Option to append multiselect list to body

[andrewboni]

Is there a way to append this to the body of the page? This is useful for situations where the multiselect list is inside of a container or other element and subsequently gets cut off.

[isteven]

Hi @andrewboni ,

Sorry for the late reply. Have you managed to find a solution?

[andrewboni]

Not yet, have just been postponing dealing w/ this for now

[zamboney]

+1

[pankajparkar]

I got similar issue. I have multiselect box inside bootstrap panel bottom. Which is cutting down the dropdown list.

[apostolidhs]

I found a temporary solution that seems that is working. The dropdown menu, that is produced by the isteven-multi-select, contains the class 'checkboxLayer'.

So, i add the following css rule:

.modal-dialog .checkboxLayer.show {
    position: fixed;
}

Of course this creates some side effects in case that the dropdown is inside a scrolled view. What i propose as solution, in this kind of issues, is to watch the scroll event and update the fixed position of the dropdown considering the offset of the isteven-multi-select. My implementation is the following:

var dropdownTopOffset = 20;

var istevenElement = $('our isteven-multi-select element');
var criteriaSearchValuesElement = istevenElement.closest('parent element that wrappes the scroll view');

var updateIstevenMultiSelectsDropdownPosition = function() {
    var offset = istevenElement.offset();
    var checkboxLayerElement = istevenElement.find('.checkboxLayer');
    checkboxLayerElement.css('top', offset.top + dropdownTopOffset);

    if (checkboxLayerElement.hasClass('show')) {
        closeElementIfNotInView(checkboxLayerElement);
    }
};

var closeElementIfNotInView = function(checkboxLayerElement) {
    var parentTop = criteriaSearchValuesElement.offset().top;
    var parentHeight = criteriaSearchValuesElement.height();
    var top = checkboxLayerElement.offset().top;

    if (top < parentTop || top > parentTop + parentHeight) {
        checkboxLayerElement.scope().toggleCheckboxes();
    }
}

criteriaSearchValuesElement.scroll(updateIstevenMultiSelectsDropdownPosition);

updateIstevenMultiSelectsDropdownPosition();