Listview arrow icons missing

ionic-v1
1

Hi,
I have an issue with Ionic listviews while developing on my Android device. While testing my app with a web browser on my PC, the default arrow icon that comes with list items is visible, while it doesn’t show up on the device. I’d upload a couple of screenshots to better illustrate the issue, but apparently I can’t do so since I’m a new user.

Relevant code (JADE):

div.scroll-content.has-header.has-footer.padding.overflow-scroll
    div.list
        a.item.item-icon-left(href="myHref1")
            i.icon.ion-information-circled
            span Customer Information
        a.item.item-icon-left(href="myHref2")
            i.icon.ion-document-text
            span Tickets
        ...

Since I’m not specifying the .item-icon-right class, I’d expect items to get the default right arrow icon as described here (on both devices and browsers).

What am I missing? Thank you for your help!

2

I recently came across this too, and it seems like a fun Android bug, so you’re not doing anything wrong. I’ll submit an issue and try to come up with a fix (hack).

Thanks

3

I saw on GitHub this issue is closed. Is it resolved ? How can I get it ?

Update:

I downloaded the nightly build v0.10.0-alpha-1052 and boom. It starts working :slight_smile:

4

seems like this issue is back with the nightly build

5

Yes, it’s back.
I upgrade to the nightly build of ionic just now, and the arrows disappear.

6

List item nav arrows are no longer automatically added by design, this commit explains it further.

1 Like
7

still having problem on android 4.0.3
icons are shown, but not centered vertically. they are top aligned…

no problem on other android versions…

8

i think you just need to add them yourself in the lastest builds, that is how i resolved my issues.

9

It’s what i’ve done. i downloaded the SCSS folder from git and put it in my project folder.
I’ve followed the commit instructions too and actually icons are shown but on android 4.1.2 they are not centered vertically…

This is my code

<div class="list">
                        
                        <a class="item item-icon-right" href="#about">Info <i class="icon ion-chevron-right icon-accessory"></i></a>
                        <div class="item item-icon-right performGlobalUpdate " >Aggiorna dati <i class="icon ion-loop icon-accessory"></i></div>
                        <div class="item item-icon-right exit" >Esci <i class="icon ion-log-out icon-accessory"></i></div>


                    </div>

and this the result:

10

God damn it. The same happened to me on Android 4.2.2. So I added "item-right" class to my ul and added a icon. Now if I upgrade to the next release then I would get both my icons and the default list icons. Headache!

11

Is there a recommended way to suppress the RHS icon altogether? I have no item-icon-right class applied to the ion-item, but the padding applied to the central <a> element is still 49px as if it’s reserving the space by default.

Do I just need to add a bit of custom CSS and a “no-right-icon class” to my ion-item (or similar) or is there a preferred method?

EDIT: for now I’ve added this to my style.css

.no-right-icon .item-content {
  padding-right: 16px;
}

and then added no-right-icon to the list of classes at the ion-item level.