Target a specific dropdown panel by css class to individually set dropdown-panel max-height

Is your feature request related to a problem? Please describe. Not sure if that can be solved currently, but I seem to miss a way to target a specific ng-dropdown-panel in css, in order to adjust max-height of the foldout.

The ultimate goal is to avoid this sort of situations:

but there can also be an opposite situation where a specific dropdown can use much more screen estate than what it is using.

Being able to target a specific dorpdown panel becomes critical:

• with appendTo="body" (or anything else) - which is where ng-dropdown-panel is no longer a descendant of ng-select.
• when a form is displayed within a modal
• when a form has multiple instances of ng-select

Describe the solution you’d like My first, cheapest shoot would be to re-use labelForId of the parent as class on the ng-dropdown-panel.

Assume a control with labelForId="users", the markup looks like so:

<ng-select bindvalue="id" bindlabel="text" ng-reflect-bind-value="id" ng-reflect-bind-label="text" ng-reflect-append-to="" ng-reflect-items="[object Object],[object Object" ng-reflect-is-disabled="false" ng-reflect-searchable="false" ng-reflect-clearable="false" ng-reflect-multiple="false" ng-reflect-dropdown-position="auto" ng-reflect-selectable-group="false" ng-reflect-close-on-select="true" ng-reflect-virtual-scroll="true" ng-reflect-label-for-id="users" class="ng-select ng-select-single ng-pristine ng-valid ng-touched ng-select-opened ng-select-bottom">

<ng-dropdown-panel role="listbox" aria-label="Options" class="ng-dropdown-panel ng-select-bottom" ng-reflect-virtual-scroll="true" ng-reflect-buffer-amount="4" ng-reflect-append-to="" ng-reflect-position="auto" ng-reflect-header-template="[object Object]" ng-reflect-items="[object Object],[object Object" ng-reflect-marked-item="[object Object]" id="abfe3714e804" style="opacity: 1;">
...
</ng-dropdown-panel>
</ng-select>

Please note that in ng-dropdown-panel there is no attribute or class that connects it to its parent ng-select.

In this case I would like ng-dropdown-panel to use its parent’s labelForId among its classes, so it could be targeted as ng-dropdown-panel.users.

Describe alternatives you’ve considered I tried to see if the appendTo element maybe also serves to restrict the dropdown panel’s rendering boundaries, but apparently not.

Additional context None.

[DzmVasileusky]

@rmcsharry This library doesn’t seem to be supported anymore. What I have done:

<ng-select (open)="onDropdownOpen()">...</ng-select>
...

onDropdownOpen () {

    setTimeout(() => {

        this.renderer2.addClass(document.querySelector('.ng-dropdown-panel'), 'custom-class');

    }); // timeout is needed to wait for dom element to be inserted

}

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions 🎆