How do I align the button icon and text to the left for ios action sheet controller?

Ionic Framework Ionic Angular
1

Here is my code that displays the action sheet controller:

this.actionSheetController.create({
header: 'Select action for ’ + manifestName,
buttons: [
{
text: ‘Send to APOD’,
handler: () => this.SendToApod(manifestId),
icon: ‘send-outline’

            },
            {
                text: 'Send to Unit',
                handler: () => this.SendToUnit(manifestId),
                icon: 'send'

            },
            {
                text: 'Export to TRN',
                handler: () => this.ExportToTrn(manifestId),
                icon: 'document-text-outline'

            },
            {
                text: 'Export to Excel',
                handler: () => this.ExportToExcel(manifestId),
                icon: 'grid-outline'

            },
            {
                text: 'Cancel',
                role: 'cancel',
                icon: 'close-outline'

            }
        ]
    }).then(actionSheetElement => {
        actionSheetElement.present();
    });

My understanding is that I have to modify the ios SASS variable for this ios setting in the src/theme/variables.scss file. I have tried many thing, but my current code looks like this in the variabls.scss file. What am I doing wrong?

.ios {
$action-sheet-ios-text-align: left;
}

No matter what I try, it is still executing the default of ‘center’.

2

Assuming you are talking about Ionic v4, and you have something like this:

Mozilla Firefox 2020-02-18 21-39-07
Mozilla Firefox 2020-02-18 21-39-07736×370 24.6 KB

And you want something like this:

Mozilla Firefox 2020-02-18 21-43-09
Mozilla Firefox 2020-02-18 21-43-09728×358 17.4 KB

In your main application styles.scss, you would add something like this:

.left-align-buttons .action-sheet-button-inner.sc-ion-action-sheet-ios {
  justify-content: flex-start;
}

And then here:

this.actionSheetController.create({
    header: 'Select action for ’ + manifestName,
    buttons: [
    //...

Add a line for the custom class:

this.actionSheetController.create({
    header: 'Select action for ’ + manifestName,
    cssClass: 'left-align-buttons',
    buttons: [
    //...

And it will left-align them. You must do it in the main styles.scss file because the component styles elsewhere are scoped. Styles in styles.scss are not scoped to specific components.

3 Likes
3

Thanks so much. This worked perfectly.

1 Like