ng-multiselect dropdown not appearing correctly on load

Question

I am using ng-multiselect dropdown in my angular application. Problem: When I load the program or open any page with that dropdown, it shows like this:

until I click on the div containing that dropdown, then it becomes normal again:

What could be the problem here?

Answer 1

Please provide relevant code or showcase the problem online (e.g stackblitz). But from what it looks like is that your select is initialized before data that should go into the select is available (updating itself when you click on it). Look over how and when you put data into those selects. In my example I use ngOnInit cycle to initialize data.

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  dropdownList = [];
  selectedItems = [];
  dropdownSettings = {};
  ngOnInit() {
    this.dropdownList = [
      { item_id: 1, item_text: 'Mumbai' },
      { item_id: 2, item_text: 'Bangaluru' },
      { item_id: 3, item_text: 'Pune' },
      { item_id: 4, item_text: 'Navsari' },
      { item_id: 5, item_text: 'New Delhi' }
    ];
    this.selectedItems = [
      { item_id: 3, item_text: 'Pune' },
      { item_id: 4, item_text: 'Navsari' }
    ];
    this.dropdownSettings = {
      singleSelection: false,
      idField: 'item_id',
      textField: 'item_text',
      selectAllText: 'Select All',
      unSelectAllText: 'UnSelect All',
      itemsShowLimit: 3,
      allowSearchFilter: true
    };
  }
  onItemSelect(item: any) {
    console.log(item);
  }
  onSelectAll(items: any) {
    console.log(items);
  }
  onItemDeSelect(item: any) {
    console.log(item);
  }
}

Here is a working example: https://stackblitz.com/edit/angular-ng-multiselect-dropdown-angular7-hr7few?file=src%2Fapp%2Fapp.component.ts