How can I resize the dropdown content height when contents are loaded

Question

To the drop down itself:

I want the content of the drop down to be loaded when expanding it (works) and I wants a default text to be shown while loading the content (works).

To the problem:

After the content has loaded the drop down content height remains the height needed for the "on load" default value. I want it to resize itself when the real content has been loaded.

<select class="form-control ng-untouched ng-pristine ng-valid" (click)="loadOrders()" style="font-size:24px; height:44px; max-width:400px;">
   <option disabled selected value="" style="display:none; visibility:hidden; height:0; font-size:0;">current Order</option>
   <option *ngFor="let order of orders" value="{{order}}">{{order}}</option>
   <option *ngIf="!loaded" style="text-align:center" value="">loading</option>
</select>

simplified plunker

It would be perfect to solve the problem in the view (component.html), including it into the loadOrders method would also be fine.

A new method only if necessary...

Thank you for your help! If you need more information - please ask!

According to [this post](https://stackoverflow.com/questions/570642/height-of-an-html-select-box-dropdown) it is not possible to change the height of the select box. I advise you to load the data on component initialization. — Dani Grosu, Aug 04 '17 at 08:15
[Plunker](http://plnkr.co/edit/VMvPv3IVRUS8tlc6JEFv?p=preview) @RahulSingh — KGrewe, Aug 04 '17 at 08:22
@DaniGrosu is there a function that can toggle the dropdown menu? — KGrewe, Aug 04 '17 at 08:32
@DaniGrosu unfortunately the whole loading process is already slow enough... — KGrewe, Aug 04 '17 at 08:38

How can I resize the dropdown content height when contents are loaded

0 Answers0