Incorrect position of dropdown on modal windows and popups

[zlatevbg]

Hi,

I suggest to remove the on the fly calculation of left and top properties on the selectivity-dropdown container. If one of the position's properties is not defined on a fixed element, the initial value of that property is as the same as if the object was static. So in our case the position of the selectivity-dropdown element should be correctly set by default relative to the containing element.

As you can see from the screenshot below setting the top and left properties is causing the incorrect positioning of the selectivity-dropdown element. That's because the position's properties obtained from selectEl.getBoundingClientRect() are not calculated relative to the nearest positioned element (the modal window in my case) but relative to the root 'html' element.

The other alternative is to use selectEl.offsetLeft and selectEl.offsetTop properties but they should accommodate for any margins (which I also have in my modal window)

function MultipleInput(options) {
function SingleInput(options) {

...

extend(el.style, {
    left: rect.left + 'px', // remove this line
    top: dropdownTop - deltaUp + 'px', // remove this line
    width: rect.width + 'px'
});

...

}

[arendjr]

Hi! Thanks for the suggestion, but unfortunately there's no one-size-fits-all solution here (AFAIK). The solution you're proposing would have its own issues, like incorrect positioning if there's a label on the left-hand side of the input within the same containing element. To resolve this, you can define your own positionDropdown() function that takes your specific use-case into consideration.

[killermouse]

When I use selectivity on a modal popup I have the same problem, and I try to set the position, but no lucky.
I cannot find the correct algoritmy to set the position!

Best regards

[killermouse]

There is my solution. I don't know if is the best solution, but works for me.

<div id="divselect" class="form-group row">    
    <label  for="labelUo" class="col-sm-3 control-label">Teste</label>
    <div class="col-sm-9">
        <select id="ddTeste" class="selectivity-alone ddTeste" >
            <option value='1'>op 1</option>
            <option value='2'>op 2</option>
            <option value='3'>op 3</option>
        </select>
    </div>
</div>

$(".ddTeste").selectivity({
    placeholder: 'Selecione uma opção',
    allowClear: false,
    positionDropdown : function($el, $selectEl) {
        var element = $selectEl;
        var selectHeight = element.height();
        var selectWidth = element.width();
        var offset = element.offset();
        var positionDiv = $("#divselect").offset(); 
        var left = offset.left - positionDiv.left;
        var top = offset.top + (selectHeight / 3);
        $(".selectivity-dropdown").css({
            left: ( left + 'px'),
            top: ( top + 'px')
        }).width(selectWidth);
    }
});