Create ion-item with two button-icon at right

ionic-v1
1

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?

2

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.

5 Likes
4

@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…

5
6

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

7

Depending on your needs you could use this

.item-button-right {
  .button:nth-child(2){
    top: 
  }
}

And just adjust the top value to fit your needs

8

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