Create ion-item with two button-icon at right


Hi! I’ve been having trouble making ion-item elements to have two button alligned to the right of the item.

I’ve tried:

> <ion-item class="item item-icon-right" ng-repeat="task in tasks">
>    <button class="icon ion-camera button button-icon" ng-click="takePicture({{task}})"></button>
>    <button class="icon ion-android-microphone button button-icon" ng-click="captureAudio({{task}})"></button>
>    {{task.title}}
> </ion-item>

but that collapses both buttons to the right, one covering the other. So I added to the style.css:

button.ion-android-microphone {
padding-right: 50px;

but in that case, although the layout is ok, the buttons don’t work propperly. Don’t matter which of both buttons I tap, it always triggers the ion-android-microphone one.

What is the right way to “padding-right” a ionic button element?


You can do that by apply item-button-right to the ion-item and then wrap the button in div with a class of buttons.


@mhartington, how would you stack the two buttons vertically? I can’t find the proper CSS to apply, and tried wrapping many ways in row divs without success…



Thanks! sorry I was not clear, but I was asking about regular buttons, not option buttons. My bad!


Depending on your needs you could use this

.item-button-right {

And just adjust the top value to fit your needs


That’s exactly what I was looking for. I really gotta study CSS… thanks!!