Earlier i used to have a drop down box in my code. I am replacing that drop down box with an ng-select component . the main reason i went for this is because i want to make the existing select box to editable for searching. however after start using the ng-select, the select box spans the entire page . i want to avoid . any idea how can i apply boostrap styles to it . i am using angular 5 and bootstrap 4 ?

<select class="mdb-select md-form" searchable="search here" formControlName="contactList" [compareWith]="compareResource">
<option value="" disabled>{{ 'PLACEHOLDERS.CONTACT_LIST' | translate }}</option>
<option *ngFor="let contactList of contactLists" [ngValue]="contactList">{{ contactList.name }}</option>
</select>

after changing to use ng-select

<ng-select [searchable]="true" formControlName="contactList" [items]="contactLists" 
bindLabel="name" 
placeholder="select a contact list" [compareWith]="compareResource">
</ng-select>

however the drop down box now spans the entire page. where as before that the drop down was small and compact .

appreciate any help thank you so much

0 Answers