[Solved] Right arrow on list item not automatically added

1

According to this:

This example uses an <a> element for each item, which allows the entire list item to be tappable. If the item is an <a> or <button> element, and no icon has been added to the right, then a small right arrow will automatically be added.

However, when I try, the arrow doesn’t get added. Here is a codepen with an example.

2

Woah, good catch! I’ll open an issue for this.

3

Nice to know it isn’t me doing something wrong for a change. :smile:

4

I beleve this has changed since beta2 and you need to manually add the icon now. See the breaking changes for beta2 here: 1.0.0-beta.2 'aluminum' released!

Here’s the part regarding the right arrow icon:

BREAKING CHANGE: The developer should be stating exactly how an icon
should show, but previously the right nav arrow icon violates this by
automatically showing a right arrow when an item was an anchor or
button. Instead of using the :after item selector, which was always
applied by default, it uses the same markup as item-icon-right, which
is easier to understand, customizable and not a hard coded default.

This change removes the :after nav icon styling, and creates a new
class, icon-accessory, based off of similar CSS. The change makes a
nav arrow highly customizable, allows RTL developers to easily control
the arrow direction, and the accessory class is something that’s
reusable.

An example of right side arrow using ion-chevron-right as the icon:

<a class="item item-icon-right" href="#">
  Check mail
  <i class="icon ion-chevron-right icon-accessory"></i>
</a>
1 Like
5

Seems you are correct. With that it now works! Thanks.

6

Good catch @compudaze, with all the constant changing, I missed that :smile:

7

The CSS/List docs still include the text saying that the right arrow will be added automatically, and the list example there seems to show it too. Could those be updated? I know it caught me, so it might save others from the same confusion…

1 Like
8

It would be great if you could update the documentation on the site. I spent a long time trying to make it work without realizing that functionality was gone.

9

Same here, pull request submitted