I'm trying to put in a list two button icons that can be clicked. I tried doing something like this but the icons overlap:
<ion-list>
<ion-item ng-repeat="item in items" class="item-button-right">
{{ item.Info }}
<button class="button button-positive" ng-click="Accept(item)">
<i class="icon ion-checkmark"></i>
</button>
<button class="button button-assertive" ng-click="Reject(item)">
<i class="icon ion-close"></i>
</button>
</ion-item>
</ion-list>
The desired behavior I'm trying to get is show some small blurb of info on the left and present two options on the right.
I have a Simple Self Contained Correct Example here: http://codepen.io/anon/pen/vzLob
I recently ran into this problem and discovered that ionic provides a class called buttons which when wrapped around multiple button elements positions them side by side.
This avoids having to use !important
which in general is considered bad practice in CSS.
Heres an example of the code which worked for me:
<div class="item item-button-right">
List item 1
<div class="buttons">
<button class="button button-energized">
<i class="icon ion-android-locate"></i>
</button>
<button class="button button-dark">
<i class="icon ion-android-arrow-forward"></i>
</button>
</div>
</div>
Also noticed your code pen attachment so thought i'd update that too to demonstrate.
all the buttons are positioned absolute
so they will overlap for sure because they have same position defined so you can overwrite the right position of any one of the button
like i have done in the example below
.button-positive{
right:70px !important;
}
Here is an example
<ion-view ng-controller="inspectorsCtrl as vm">
<ion-content class="has-header">
<ion-list>
<ion-item ng-repeat=" item in vm.items" class="item-icon-right">
{{item.info}}
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</ion-list>
</ion-content>
</ion-view>