Dropdown List Menu Width and Height
This will allow users to configure the dropdown menu width and height by overriding default dropdown properties.
What You Will See
Select
import { Component } from '@angular/core'; import { ExampleData } from 'helper-models'; import { DataFetchService } from 'helper-services'; @Component({ selector: 'app-menu-width-height-usage', templateUrl: './menu-width-height-usage.component.html' }) export class MenuWidthHeightUsageComponent { public options: ExampleData[]; constructor(private dataFetchService: DataFetchService) { this.options = this.dataFetchService.fetchStaticData(); } }
<ng-dropdown [id]="'products_styling_01'" [selectTrackBy]="'id'" [displayTrackBy]="'productType'" [options]="options" [filterable]="true" [menuHeight]="200" [menuWidth]="250"> </ng-dropdown>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DropdownModule } from 'ornamentum'; import { MenuWidthHeightUsageComponent } from './menu-width-height-usage.component'; @NgModule({ bootstrap: [MenuWidthHeightUsageComponent], declarations: [MenuWidthHeightUsageComponent], imports: [ BrowserModule, DropdownModule.forRoot() ] }) export class MenuWidthHeightUsageModule { }
Basic Usage
User allow to define dropdown view height and width by manually. for that simply bind menuHeight
or menuWidth
properties together or individually.
<ng-dropdown ... [menuHeight]="200" [menuWidth]="250"> </ng-dropdown>
Useful Properties
Menu Height
menuHeight: number
Default Value: 250
Resize the height of dropdown.
Select
import { Component } from '@angular/core'; import { ExampleData } from 'helper-models'; import { DataFetchService } from 'helper-services'; @Component({ selector: 'app-menu-height-usage', templateUrl: './menu-height-usage.component.html' }) export class MenuHeightUsageComponent { public options: ExampleData[]; constructor(private dataFetchService: DataFetchService) { this.options = this.dataFetchService.fetchStaticData(); } }
<ng-dropdown [id]="'products_styling_02'" [selectTrackBy]="'id'" [displayTrackBy]="'productType'" [options]="options" [filterable]="true" [menuHeight]="200"> </ng-dropdown>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DropdownModule } from 'ornamentum'; import { MenuHeightUsageComponent } from './menu-height-usage.component'; @NgModule({ bootstrap: [MenuHeightUsageComponent], declarations: [MenuHeightUsageComponent], imports: [ BrowserModule, DropdownModule.forRoot() ] }) export class MenuHeightUsageModule { }
Menu Width
menuWidth: number
Default Value: 320
Resize the width of dropdown view.
Select
import { Component } from '@angular/core'; import { ExampleData } from 'helper-models'; import { DataFetchService } from 'helper-services'; @Component({ selector: 'app-menu-width-usage', templateUrl: './menu-width-usage.component.html' }) export class MenuWidthUsageComponent { public options: ExampleData[]; constructor(private dataFetchService: DataFetchService) { this.options = this.dataFetchService.fetchStaticData(); } }
<ng-dropdown [id]="'products_styling_03'" [selectTrackBy]="'id'" [displayTrackBy]="'productType'" [options]="options" [filterable]="true" [menuWidth]="250"> </ng-dropdown>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DropdownModule } from 'ornamentum'; import { MenuWidthUsageComponent } from './menu-width-usage.component'; @NgModule({ bootstrap: [MenuWidthUsageComponent], declarations: [MenuWidthUsageComponent], imports: [ BrowserModule, DropdownModule.forRoot() ] }) export class MenuWidthUsageModule { }
Suggested Links
Menu PositionFiltering
API Doc for Dropdown Menu Width and Height