Actionsheet's Android "ugly" styling.. need help

In the nightly, the actionsheet CSS has a platform specific update for android. It removes the cancel button (I’m ok with that) but also renders everything else pretty ugly (not so okay with that). Here’s an example of what it looks like.

The code I’m using is (abbreviated)

   $scope.addSomething = function(){
       $ionicActionSheet.show({
           buttons: [
               {text: 'Create Stack of Cards'},
               {text: 'Add New Card'},
           ],
           titleText: 'Add',
           cancelText: 'Cancel',
           cancel: function() {
               return false;
           },
           buttonClicked: function(index){
               if (index==0) {
                   console.log("index="+index);
                   return true;
               }
               if (index==1) {
                   console.log("index="+index);
                   return true;
               }
           }
       })
   }

Any examples on how to make it not look so ugly yet still look android-ish?

2 Likes

Just to remind you, we’re incorporating material design aspects into ionic, so thats why there are style changes.

http://www.google.com/design/spec/components/bottom-sheets.html#bottom-sheets-usage

To change, this, just use css

4 Likes

Got it… I hadn’t realized that was what was going on and assumed I was doing something wrong.

If you want to the looks to be same in android and iphone then find the below code block in css stylesheet and comment it out. Then it will look the same as in iphone.

.platform-android .action-sheet-backdrop.active {
background-color: rgba(0, 0, 0, 0.2); }
.platform-android .action-sheet {
margin: 0; }
.platform-android .action-sheet .action-sheet-title, .platform-android .action-sheet .button {
text-align: left;
border-color: transparent;
font-size: 16px;
color: inherit; }
.platform-android .action-sheet .action-sheet-title {
font-size: 14px;
padding: 16px;
color: #666; }
.platform-android .action-sheet .button.active, .platform-android .action-sheet .button.activated {
background: #e8e8e8; }
.platform-android .action-sheet-group {
margin: 0;
border-radius: 0;
background-color: #fafafa; }
.platform-android .action-sheet-cancel {
display: none; }
.platform-android .action-sheet-has-icons .button {
padding-left: 56px; }

i copy this from @aaditya

9 Likes

@mhartington I just incorporated the full material spec for bottom-sheets into our ionic app. One thing you are currently missing is the ability to handle lists that are larger than the screen. In my implementation:

  • the first X items are displayed (similar to what you have)
  • the X+1 item is half visible at the bottom (UX to imply there are more)
  • you can drag the menu upwards and it snaps to the top of the screen
  • If all of the items aren’t visible, then the list is scrollable

Here’s a video of it in action: https://vid.me/1RPT

Oh nice that looks awesome. Any chance you could share some code?
We’re not planning on adding anything else to ionic until we get to 1.0 final, but this would be something that would investigate.

I kind of hacked this together to work in a codepen. Its very specific to our app and not a turn key solution for everyone to use - but it might be helpful to someone building their own:

I had to make a bunch of hacky changes to prevent me needing to pull in a bunch of other dependencies.

actionSheets crash at last lib updates

@mhartington Why doesn’t cancel button appears on android? On ios, it appears

If I may, this is due to Material’s design guidelines on bottom sheets quoted as follows:

Bottom sheets can be dismissed by swiping the bottom sheet down, by touching an explicit control such as an X in the app bar, or by touching the system back button (Android). Modal bottom sheets can also be dismissed by touching outside of the bottom sheet.

Also, I would like to add to the solution the following snippet of code for adding an icon only for Android:

            // Show the action sheet
            var hideSheet = $ionicActionSheet.show({
                destructiveText: (ionic.Platform.isAndroid()?'<i class="icon ion-android-exit assertive"></i> ':'')+'End Task',
                cancelText: 'Cancel',
                cancel: function() {
                    hideSheet();
                },
                destructiveButtonClicked: function(index) {
                    console.log('Clicked end task');
                    //your function
                    return true;
                }
            });

Hey, This is very simple. in _action-sheet.scss, just change the

.platform-android to .xplatform-android

Now, see same style of action sheet in both ios and android :smile:

1 Like

I copied the css also from this old forum post here. Then changed it as you said. So now it looks like:

.xplatform-android .action-sheet-backdrop.active {
background-color: rgba(0, 0, 0, 0.2); }
.xplatform-android .action-sheet {
margin: 0; }
.xplatform-android .action-sheet .action-sheet-title, .platform-android .action-sheet .button {
text-align: left;
border-color: transparent;
font-size: 16px;
color: inherit; }
.xplatform-android .action-sheet .action-sheet-title {
font-size: 14px;
padding: 16px;
color: #666; }
.xplatform-android .action-sheet .button.active, .platform-android .action-sheet .button.activated {
background: #e8e8e8; }
.xplatform-android .action-sheet-group {
margin: 0;
border-radius: 0;
background-color: #fafafa; }
.xplatform-android .action-sheet-cancel {
display: none; }
.xplatform-android .action-sheet-has-icons .button {
padding-left: 56px; }

but it still looks the same on android: Textcolor is black and only when I click the destructive option, it changes to red for a short time (and it still doesn’t look so fancy as in ios)

@cherry_wave,

I tweaked a couple things including some margins and text color to get it more like ios while trying to keep some material-design properties. In other words, just trying to make use-able and not some text bunched down in the corner of the screen:

.platform-android .action-sheet-backdrop.active {
background-color: rgba(0, 0, 0, 0.1); }
    .platform-android .action-sheet {
align-content: center;
margin:auto;
max-width: 96vw;
border-radius: 5px;
/*margin: 0;*/
margin-bottom: 10px;}
    .platform-android .action-sheet .action-sheet-title, .platform-android .action-sheet .button {
text-align: left;
/*border-color: #e2e2e2;*/
font-size: 16px;
color: inherit;}
    .platform-android .action-sheet .action-sheet-title {
font-size: 14px;
padding: 16px;
color: #666; }
    .platform-android .action-sheet .button {
border-color: #e2e2e2;
padding-left: 16px;
color: #104e89;
    }
    .platform-android .action-sheet .button.destructive {
color: red;
    }
    .platform-android .action-sheet .button.active, .platform-android .action-sheet .button.activated {
background: #e8e8e8; }
    .platform-android .action-sheet-group {
/*margin: 0;*/
border-radius: 0;
background-color: #fafafa; }
    .platform-android .action-sheet-cancel {
display: none;
    }
    .platform-android .action-sheet-has-icons .button {
padding-left: 56px; }

hope that helps a bit

7 Likes

very nice styling, thanks for that! :slight_smile:

still cancel button not displaying on android

Is it being hidden or is it just located outside of the view?

this solve my problem,… thanks @lwf and @aaditya

Awesome !! Really helpful . (y)

1 Like

cancel button is not visible how can i get it

add this css
.platform-android .action-sheet-cancel {
display: block !important;
}