Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Confused Coder
30
IGXDropdown does not show complete list or scroll
posted

I am using a custom component  which is based on the igx-drop-down. For some reason it creates the button and it will dropdown 
but it shows a limited amount of items and will not scroll. Any reason for that ?

here is the template code which implements this custom component

    <div class="row">
        <div class="col-md-12">
            <div class="small-space"></div>
            <div class="row">
                <div class="col-md-2 m-auto">
                </div>
                <div class="col-md-10">
                    <div class="pull-right">
                        <app-dropdown-select title="Templates"
                                             [options]="templateOptions$ | async"
                                             (optionSelected)="addField($event)">

                        </app-dropdown-select>
                    </div>
                </div>
            </div>
        </div>
    </div>

This is the output created from the above code

This is the template file of my custom component

<button igxButton (click)="toggleDropDown($event)"
        type="button"
        [igxDropDownItemNavigation]="dropdown1">{{title}}</button>
<igx-drop-down #dropdown1 (onSelection)="onSelect($event)">
    <igx-drop-down-item *ngFor="let option of options" [value]="option">
        {{ option.name }}
    </igx-drop-down-item>
</igx-drop-down>
And this is the TS file of the component 
export class DropdownSelectComponent implements OnInit {

    @ViewChild(IgxDropDownComponent) public igxDropDown: IgxDropDownComponent;

    @Input() title: string;
    @Input() options: IServerDropdownOption[] = [];

    @Output() optionSelected = new EventEmitter<IServerDropdownOption>();

    private _overlaySettings = {
        closeOnOutsideClick: true,
        modal: false,
        positionStrategy: new AutoPositionStrategy(),
        scrollStrategy: new CloseScrollStrategy()
    };

    constructor() {
    }

    public ngOnInit() {
    }

    public toggleDropDown(eventArgs) {
        this._overlaySettings.positionStrategy.settings.target = eventArgs.target;
        this.igxDropDown.toggle(this._overlaySettings);
    }

    onSelect($event: ISelectionEventArgs) {
        this.optionSelected.emit($event.newSelection.value);
    }
}
  • 60
    Offline posted

    Hello,

    Thank you for contacting Infragistics Support.

    I have been looking into your question and prepared a small sample that you might consider useful. It could be found here. As you can observe, I am using the class ‘‘.drop-down__scroll-container‘‘ to add scroll:

         .drop-down__scroll-container {

                max-height: 240px;

          }

    Additionally, if you have a lot of items it would be best to use Virtual Drop Down.

    Please have a look at the provided sample and if it is not an accurate demonstration of what you are trying to achieve please feel free to modify it and send it back to me for further investigation.

    Looking forward to hearing from you. 

    Regards,
    Malin Hadzhiev
    Entry Level Software Developer
    Infragistics