Customize popup width in Angular Drop down button component

15 Dec 20242 minutes to read

The dropdown popup width can be customized using the popupWidth property of the DropDownButton component. By default, the popup’s width adjusts based on the content. However, this property allows setting a specific width, ensuring consistency and alignment with design requirements. The width can be specified using common CSS units or as a raw pixel value.

app.component.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DropDownButtonModule } from '@syncfusion/ej2-angular-splitbuttons';
import { enableRipple } from '@syncfusion/ej2-base';

import { Component } from '@angular/core';
import { ItemModel } from '@syncfusion/ej2-angular-splitbuttons';

@Component({
  imports: [
    DropDownButtonModule
  ],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <!-- To render DropDownButton. -->
      <button ejs-dropdownbutton [items]='items' [popupWidth]="'200px'" content='DropDownButton'></button>
    </div>
  `
})

export class AppComponent {
  // Initialize action items.
  public items: ItemModel[] = [
    {
      text: 'Selection',
      iconCss: 'e-icons e-list-unordered'
    },
    {
      text: 'Yes / No',
      iconCss: 'e-icons e-check-box'
    },
    {
      text: 'Text',
      iconCss: 'e-icons e-caption'
    },
    {
      text: 'None',
      iconCss: 'e-icons e-mouse-pointer'
    }
  ];
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));