Action sheet looks strange on mobile


#1

Hi everyone. Action sheet on mobile looks diferent from web browser action sheet. How to make them the same? Thanks

Mobile

Web browser


#2

That’s the point of Ionic, it adapts to running platform.

I don’t think you can change this.


#3

I too had the similar issue with the action sheet.
There are few classes which you see in the markup.

//This class is the header.(In your example Modify your album)

.action-sheet-title {
    text-align: center
}

//This is the class for each option(In your case the container of Edit and Delete)

.action-sheet-options {

}

//This is the class for each option(In your case Edit / Delete)

.action-sheet-option {

}

//This is the parent/top most class of the whole action sheet

.action-sheet-wrapper {

}

Child of action-sheet-wrapper class

.action-sheet {

}

You an use these classes to override the default CSS.
I think this will serve the purpose.