Ionic Action Sheet different on Android

ionic-v1
1

Below is my current environment.

Cordova CLI: 5.3.1
Ionic Version: 1.0.1
Ionic CLI Version: 1.6.4
Ionic App Lib Version: 0.3.8
ios-deploy version: 1.7.0
ios-sim version: 3.1.1
OS: Mac OS X Yosemite
Node Version: v0.12.2
Xcode version: Xcode 7.0 Build version 7A220

I have been developing using Ionic and Angular for a few months now, kindly bare in mind that i might still be a newbie. :smiley:

I’m currently having a problem with the way ionic Action Sheet displays on android.
Below is my code:

HTML :

<a class="item item-input item-icon-right" ng-click="selectImage()">
            <span class="input-label item-stacked-label">{{'Image'|translate}}</span>
            <i class="icon ion-image"></i>
        </a>

JS:

$scope.selectImage = function() {
            var options = {
                quality : 96,
                destinationType : Camera.DestinationType.FILE_URL,
                allowEdit : true,
                encodingType: Camera.EncodingType.JPEG,
                popoverOptions: CameraPopoverOptions,
                correctOrientation: true,
                saveToPhotoAlbum: false
            };$ionicActionSheet.show({
                buttons: [
                    { text: $translate.instant('From Camera') },
                    { text: $translate.instant('From Photo Library') }
                ],
                cancelText: $translate.instant('Cancel'),
                    cancel: function () {
                        return true;
                },
                destructiveText: $translate.instant('Delete All'),
                    destructiveButtonClicked: function () {
                        $scope.notification.allimages='';
                        return true;
                },
                buttonClicked: function(index) {
                    switch(index) {
                        case 0:
                            options.sourceType = Camera.PictureSourceType.CAMERA;
                            break;
                        case 1:
                            options.sourceType = Camera.PictureSourceType.PHOTOLIBRARY;
                            break;
                    }
                    $cordovaCamera.getPicture(options).then(function(imageUrl) {
                        $scope.saveImage(imageUrl);
                    }, function(err) {
                        if (err != 'no image selected' && (typeof err != 'undefined' && err.indexOf('cancelled')==-1)) {
                            $cordovaDialogs.alert($translate.instant('Error') + '! ' + (err && err.data && err.data.message ? err.data.message : ""), $translate.instant('Save Picture'), $translate.instant('OK'));
                        }
                    });
                    return true;
                }
            });

On my iPhone 5, it displays the Action sheet normally with the blue text, red destructive text, and the action buttons in the default css as it is stated. But, on my Android 5.0.2 & Android 4.4.4 is just showing a plain white sheet up, with NO css applied.

Pls let me know if i need to attach a screenshot for better clarification.
Thanks for the help!

2

See Actionsheet’s Android “ugly” styling.. need help they are using Google’s material design spec now. You can customise the CSS yourself:
.platform-android .action-sheet {}

1 Like