Setting dimensions in Angular DropDownList

3 Mar 20237 minutes to read

Widget Sizing

Fixed Size DropDownList widget

You can customize the widget dimensions using width and height properties. Fixed size values can be specified in pixel or percentage values. By default the DropDownList wrapper will be assigned with “143px” width and “30px” height.

Fixed size popup list

You can customize the popup list dimensions using popupWidth and popupHeight properties. Fixed size values can be specified in pixel or percentage values. By default popup width is auto and popup height is “152px”.

Auto Sizing

DropDownList is adaptive to mobile and web layout such that it is adjustable with screen resolution. The textbox will be rendered based on its parent containers dimensions on assigning 100% values to the width property. Default value for popupWidth is auto, so when you assign 100% to popupWidth then it will be rendered based on specified range.

Limit the number of items

You can use itemsCount property to fetch only the specific number of items from the data source. To fetch the remaining items you can enable virtual scrolling support which loads the data on scrolling the data items in popup list.

NOTE

By default popup list is shown on DropDownList button click but you can display the list initially by enabling the showPopupOnLoad property. You can also use showPopup () or hidePopup () methods at run time to display or hide the popup list.

HTML

<input id="dropdown1" ej-dropdownlist [dataSource]="data" [fields]="fieldsvalues" [itemsCount]="count" [showPopupOnLoad]="true"/>

HTML

import {Component} from '@angular/core';
@Component({
selector: 'sd-home',
templateUrl: 'app/components/dropdown/dropdown.component.html'
})
export class DropDownListComponent {
   	data: Array<Object>;
    fieldsvalues: Object;
    count: number;
    constructor() {
        this.data = [{
            text: "ListItem 1",
            value: "item1"
            }, {
                text: "ListItem 2",
                value: "item2"
            }, {
                text: "ListItem 3",
                value: "item3"
            }, {
                text: "ListItem 4",
                value: "item4"
            }, {
                text: "ListItem 5",
                value: "item5"
            }];
            this.fieldsvalues = { text: "text", value: "value" };
            this.count = 3;
    }
}

Popup resizing

To show a resize handle in the popup list, use enablePopupResize property. You can customize the resize functionality by setting dimensions to the following properties.

minPopupWidth	Default value is 0, once set you cannot resize below to the specified width
maxPopupWidth	Default value is null, once set you cannot extend beyond to the specified width
minPopupHeight	Default value is 0, once set you cannot resize below to the specified height
maxPopupHeight	Default value is null, once set you cannot extend beyond to the specified height

HTML

<input id="dropdown1" ej-dropdownlist [dataSource]="data" [fields]="fieldsvalues" [enablePopupResize]="true" [minPopupWidth]="minwidth" [minPopupHeight]="minheight" [maxPopupWidth]="maxwidth" [maxPopupHeight]="maxheight">

HTML

import {Component} from '@angular/core';
@Component({
selector: 'sd-home',
templateUrl: 'app/components/dropdown/dropdown.component.html'
})
export class DropDownListComponent {
   	data: Array<Object>;
    fieldsvalues: Object;
    minwidth: number;
    minheight: number;
    maxwidth: number;
    maxheight: number;
    constructor() {
        this.data = [{
                text: "ListItem 1",
                value: "item1"
            }, {
                text: "ListItem 2",
                value: "item2"
            }, {
                text: "ListItem 3",
                value: "item3"
            }, {
                text: "ListItem 4",
                value: "item4"
            }, {
                text: "ListItem 5",
                value: "item5"
            }];
        this.fieldsvalues = { text: "text", value: "value" };
        this.minwidth = 150;
        this.minheight = 150;
        this.maxwidth = 550;
        this.maxheight = 550;
    }
}