Ionic 3 - Dropdown Select

Question

I am trying to recreate the below in Ionic 3 (see link for GIF). I have no idea what I am doing. I have tried to use the ionic select options but it is not giving me the desired effect. Can someone please help me with this?

Dropdown Select:

More Info:

Currently I am at this point: Current Progress

As you can see, very far off. My code is:

<ion-grid>
    <ion-row>
        <ion-col col-3>
            <ion-item>
                <ion-label stacked>Filter</ion-label>
                <ion-select interface="popover">
                    <ion-option value="10">10</ion-option>
                    <ion-option value="20">20</ion-option>
                </ion-select>
            </ion-item>
        </ion-col>
        <ion-col col-3>
            <ion-item>
                <ion-label>Due Date</ion-label>
                <ion-select interface="popover">
                    <ion-option value="10">10</ion-option>
                    <ion-option value="20">20</ion-option>
                </ion-select>
            </ion-item>
        </ion-col>
        <ion-col col-3>
            <ion-item>
                <ion-label>Descending</ion-label>
                <ion-select interface="popover">
                    <ion-option value="10">10</ion-option>
                    <ion-option value="20">20</ion-option>
                </ion-select>
            </ion-item>
        </ion-col>
    </ion-row>
</ion-grid>

Answer 1

Even though you are using ionic doesn't mean you can't use the normal html select component.

<select name="carlist" form="carform">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Answer 2

Below is the html code from drop down..it is not exactly as you want...but i hope u'll get some idea :

Declare variable in .ts file : selectedLeave : string = '';

add below code in html file :

<ion-item class="item-leave-height">
    <ion-label>SELECT LEAVE</ion-label>
    <ion-select [(ngModel)]="selectedLeave">
        <ion-option value="CASUAL LEAVE">Casual Leave</ion-option>
        <ion-option value="COMP OFF">Comp Off</ion-option>
        <ion-option value="EARNED LEAVE">Earned Leave</ion-option>
        <ion-option value="SICK LEAVE">Sick Leave</ion-option>
    </ion-select>
</ion-item>

Answer 3

I suggest using the Popover Controller. Generate a new Page with your ion-selectand call it like this:

 presentPopover(myEvent) {
    let popover = this.popoverCtrl.create("YourPopoverPage");
    popover.present({
      ev: myEvent
    });
  }

This should be in your html with the Selects:

<div (click)="presentPopover($event)" style="display:flex; float:right;">
          <ion-label style="text-align:right;">Klick</ion-label>
          <ion-icon name="md-arrow-dropdown" id="icon_lang"></ion-icon>
    </div>