Button ion-item is not showing right arrow >

Ionic Framework ionic-v3
1

Hi,

For some reason, the right arrow in button ion-item is not showing up. Below is the appearance on running ionic serve.

ion button
ion button.JPG324Ă—628 8.51 KB

HTML code:

<ion-list>
    <button ion-item>A</button>
    <button ion-item>B</button>
    <button ion-item>C</button>
  </ion-list>

Is this a bug?

Thanks

2

Not sure if this is related but I also run the following:

ionic cordova platform add android
ionic cordova build android
cordova plugin add cordova-plugin-inappbrowser

3

Any thoughts on this?

4

WHAT???

Please refer ionic docs.



	<ion-list>
		<ion-item>
			<h2>Item A</h2>
			<p>
				Item description
			</p>
			<ion-icon name="arrow-forward"  end></ion-icon>
		</ion-item>
		<ion-item>
			<h2>Item B</h2>
			<p>
				Item description
			</p>
			<ion-icon name="arrow-forward" end></ion-icon>
		</ion-item>
		<ion-item>
			<h2>Item C</h2>
			<p>
				Item description
			</p>
			<ion-icon name="arrow-forward" end></ion-icon>
		</ion-item>
	</ion-list>

refer Ionic Icons for more icons

5

Thanks for your suggestions. Result is below when I run it.
Ionic Arrow

I would like it to be clickable similar to this arrow:

ionic
ionic299Ă—548 27.6 KB

6 
	<ion-list>
		<ion-item >
			<h2>Title</h2>
			<p>
				Description
			</p>
			<button (click)="your_function_name()" ion-button clear item-end>
				<ion-icon name="arrow-forward"></ion-icon>
			</button>
		</ion-item>
	</ion-list>

Try this. Mark as solution if you get what you desire. :slight_smile:

PS: remove padding from <ion-content> it will look better.

7

Thanks. It now looks better. The only problem is it’s not responding to clicks when you click on the name/description. :smiley: Method was only called when you click the small arrow at the far right.

8

<ion-item (click)="your_function()"></ion-item>

remove (click)=“your_function_name()” from button

9

Thanks for this!

Guess I already found the issue. Missing right arrow only happen when loading “ionic serve” on normal browser on the first time… When I set browser “Toggle Device Toolbar” properties via Dev Tools then reload the page, arrow now appears.

I’ll keep your solution for future in case this scenario happen again.

Thanks a lot!

10

Don’t try the above dirty solutions. Here is the complete answer https://ionicframework.com/docs/api/components/item/Item/

See section “Detail Arrows”

4 Likes
11

The docs says:

By default, <button> and <a> elements with the ion-item attribute will display a right arrow icon on ios mode.

Emphasizing: ios … why this isn’t the behavior everywhere ?

Because, if I’m placing an arrow by myself using ionicons - now I need to hide that arrow on ios, otherwise I’ll have two arrows ?!

12

Detail arrows not showing for me in V4 either (in browser).
Tried adding detail attribute but does not work.
Worked fine in v3 for me.

<ion-list>
    <ion-item-sliding *ngFor="let dr of defectReportService.history" detail>
      <ion-item>
        <ion-icon name="clipboard" slot="start" [color]="getIconColour(dr.defectCount)"></ion-icon>
        <ion-label>
          <h3>{{dr.driverName}} - {{dr.dateCreated | date: 'yyyy-MM-dd'}}</h3>
          <p>{{dr.defectCount}} Defects</p>
        </ion-label>
        <ion-checkbox slot="end"></ion-checkbox>
      </ion-item>
      <ion-item-options side="end" detail>
        <ion-item-option (click)="onOpenDefectReport(dr)"><ion-icon slot="icon-only" name="clipboard"></ion-icon></ion-item-option>
        <ion-item-option (click)="onShareDefectReport(dr)"><ion-icon slot="icon-only" name="share"></ion-icon></ion-item-option>
        <ion-item-option color="danger" (click)="onRemoveDefectReport(dr)"><ion-icon slot="icon-only" name="trash"></ion-icon></ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
13

My mistake. Add it to ion-item rather than ion-item-sliding and it works:

<ion-item detail>
1 Like