Incorrect positioning when using append-to-body and scrolling parent element relative to the body

[gpeshans]

trafficstars

I have a ui-select element inside a container element that has a scroll bar. When the select is open and I start to scroll, the select element remains on the same position and doesn't re-position itself. This happens cause it is appended to the body and we scroll the container element that is positioned relative to the body. Here is a plunkr with the issue.

A suggestion for an easy fix would be to lock the scroll outside the ui-select when it is open. That's how the old ui-select2 works.

[Ankurkh1]

+1

[brentmiller]

+1

[stenersen]

+1

[anoopsinghbayes]

I believe this is because the whole ui-select container is append to body on open,where as the jQuery select 2 implementation appends the dropdown menu ,i.e the ui-select-choices container to the body and also closes the menu on the parent container scroll

[yotamelkaslasy]

+1

[Brant-Ma]

+1

[vkmi]

+1 Issue affects both vertical and horizontal scrolling.

[Jefiozie]

Please do not "+1" issues, use github 👍 reactions if you really must. Comments should be reserved for constructive discussion/issue resolution. +1s merely add unnecessary noise and scrolling between other, more helpful, replies.

Other ways you can actually help include:

Submitting a pull request that resolves the issue/adds the requested feature Researching possible implementations or causes of bugs Providing reproduction plunkrs if one isn't already available

Thanks! 😄

[pamo]

@PesanskiGoran Do you want to allow the parent container to scroll when the select is open? I fixed/bypassed the floating issue within a scrollable parent by setting a variable on scope with the uis-open-close directive and then conditionally applying a .scrollable or '.locked' class on the parent using ng-class based on that value.

e.g.

<div ng-class="{ scrollable: !lockScrolling, locked: lockScrolling }">
    <ui-select uis-open-close="lockScrolling = isOpen"
                 append-to-body="true">
    ...
    </ui-select>
</div>

Hope this helps.

[Kamran1991]

You can fix it by using functions of uiSelect in your controller, just catch the scroll event and in callback use this code

var uiSelectController = angular.element('(class of uiSelect element)').controller('uiSelect');
                if (uiSelectController && uiSelectController.open) {
                    uiSelectController.close(true);
                    uiSelectController.clickTriggeredSelect = false;
                }