Android "arrow-forward" not showing up for <button ion-item>


#1

When I create a button list-item, on iOS it shows the arrow-forward icon on the right, but on Android it does not.

Here’s an iOS example: http://cl.ly/3p3j291y1I2r
Here’s an Android example: http://cl.ly/451X3K0u023w

As you can see, without the arrow-forward it makes it impossible to know which areas are clickable.

Is this a bug, or intentional? If intentional, it seems like it might be worth reconsidering.

Cordova CLI: 5.4.1
Gulp version:  CLI version 3.9.0
Gulp local:  
Ionic CLI Version: 2.0.0-beta.15
Ionic App Lib Version: 2.0.0-beta.8
ios-deploy version: Not installed
ios-sim version: 5.0.4 
OS: Mac OS X El Capitan
Node Version: v5.2.0
Xcode version: Xcode 7.2 Build version 7C68

#2

Has anyone else noticed this? It seems like a pretty big usability issue on Android, or am I missing something or doing something wrong?


#3

I can at least report I am not having that issue with android viewed in the browser


#4

Could you post a code example of how you’re doing it? I suspect I may be forming the ion-item incorrectly.


#5
<ion-content class="has-header" padding="true" scroll="false">
    <ion-list>
      <div class="item item-button-right">
        Event
        <button class="button button-positive">
          <i class="icon ion-ios-arrow-right"></i>
        </button>
      </div>
    </ion-list>
  </ion-content>

Is it a problem in <ion-list> or <ion-item> or the combination of both?
#6

Aha! You’re explicitly saying item-button-right. The Ionic docs say to create a clickable list-item to do it like this:

<ion-list>
  <button ion-item (click)="...">
    Clickable Item (no icon for android)
  </button>
</ion-list>

I like your work-around. Thanks for the tip!


#7

Actually it appears like your solution might be an Ionic v1 solution. My problem is with Ionic v2.


#8

Ahh I cant help there Im afraid


#9

So for posterity, I dug into the issue a bit more and it appears this is intentional. The MD styles do not include the right arrow like iOS does. Personally I don’t like this, it feels like a bad UX to me. So I hacked a solution locally.

In my app.md.scss, I added this (which mimics how iOS adds the right arrow on clickable list items):

// BEGIN HACK --------------------------------------------------------
// I've copied this style from the iOS settings.  For some reason, the
// Android defaults do not have a right arrow on active list items that
// can be clickable.  This seems like a bad UX to me, so I'm adding
// it here for Android, even if it's not standard.

$icon-detail-push-background-svg:    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='fg-color'/></svg>" !default;
$item-md-detail-push-color:          $list-md-border-color !default;

@mixin md-detail-push-icon($fg-color) {
  $svg: str-replace($icon-detail-push-background-svg, 'fg-color', $fg-color);
  @include svg-background-image($svg);
}

button.item:not([detail-none]) .item-inner,
a.item:not([detail-none]) .item-inner,
.item[detail-push] .item-inner {
  @include md-detail-push-icon($item-md-detail-push-color);
  background-repeat: no-repeat;
  background-position: right (15px - 2) center;
  background-size: 14px 14px;
  padding-right: 32px;
}
// END HACK -----------------------------------------------------------

#10

@lehresman Thanks for sharing this. I also liked the arrow-forward on both styles. Great to see I wasn’t the only one overriding the styles!


#11

So this is actually following the Material Design guidelines that there aren’t arrows on list items, see the docs here: https://www.google.com/design/spec/components/lists.html#lists-specs

However, I agree that it should be an option to enable the arrow forward, so I created an issue for it. :slight_smile:


#12

amazing sir… :slight_smile:
Thanks


#14

thanks this is work for me


#15

This is possible in Ionic now. The arrow needs to be enabled by including the following Sass variables in your variables.scss file:

$item-md-detail-push-show: true;
$item-wp-detail-push-show: true;

Please see the following comment for more information: https://github.com/ionic-team/ionic/issues/5993#issuecomment-224979797

or the documentation: http://ionicframework.com/docs/api/components/item/Item/#detail-arrows

Please let me know if this isn’t working, thanks!


#16

You are a legend!! Thanks!!!


#17

It works, thanks! @brandyshea


#18

Great solution @brandyshea. It works great for me too.