Ion-select-option

Ionic Framework
1 
<ion-content>
  <ion-item>
    <ion-label >Works</ion-label>
    <ion-select interface="action-sheet">
      <ion-select-option *ngFor="let work of works" >{{work}}</ion-select-option>
    </ion-select>
  </ion-item> 
</ion-content>

I want to change the height of the options shown in action-sheet. How can I do that?

2

What kind of view you want or make itself what you want to make view using simple CSS

3

The simple CSS does not apply in ionic 4.

4

Try this

//"app-home" is page selector found in page.ts file
app-home {
  .action-sheet-button.sc-ion-action-sheet-md {
    height: 88px !important;
  }
}

Adjust hight as you want and let me know if this won’t work.

5

Sorry for so late reply But It didn’t work, maybe I applied it wrongly. Well, this is my file registration.page.ts , the selector is app-registration and the code I applied in registration.page.scss file is:

app-registration {
        .action-sheet-button.sc-ion-action-sheet-md {
            height: 62px !important;
        }
    }
6

see action sheet docs on ionic framework there you will find the solution you need

7

I have seen the docs there’s nothing about how to style the action sheet just some CSS Properties which are not good enough.

8

Sorry for your inconvenience

Try inspector element in browser and inspect the action sheet drops on selection of ion select and try changing css properties on browser itself

Copy The class which changes the action sheet
And paste it to your scss file