How can I show two icons as right aligned in an ionic list?
I am trying to add two clickable button icons to a list. I tried to do 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 to show a little information on the left and present two options on the right.
I have a simple self-saved correct example: http://codepen.io/anon/pen/vzLob
source to share
I recently ran into this problem and found that Ionic provides a class called .buttons
that, when wrapped around multiple button elements, positions them next to each other.
This avoids the use of !important
what is generally considered bad practice in CSS.
Here is some sample code that 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 password pinning app, so I thought I'd update that too to demonstrate.
source to share
Here's 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>
source to share
Try it like this:
First take one div class and then take 2 buttons inside the div tag.
<div class="buttons" >
<button class="button button-icon" >
<i class = "icon ion-funnel"></i>
</button>
<button class="button button-icon" >
<i class = "icon ion-android-document"> </i>
</button>
</div>
source to share
The button solution only works if the text is not long or there are only two icons.
Together with flexbox, it works in any situation.
<ion-list>
<ion-item
ng-repeat="item in items"
class='item-multiple-buttons'
>
<div class="buttons buttons-left">
<button class="button button-icon ion-checkmark-circled"></button>
<button class="button button-icon ion-information-circled"></button>
</div>
<div class="item-content" >
{{$index + 1}}. Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>
<div class="buttons buttons-right">
<button class="button button-icon ion-close-circled"></button>
<button class="button button-icon ion-help-circled"></button>
<button class="button button-icon ion-minus-circled"></button>
<button class="button button-icon ion-plus-circled"></button>
</div>
</ion-item>
</ion-list>
SCSS:
/* Variable values from ionic */
$item-padding: 16px;
$item-icon-font-size: 32px;
// From _button.scss, hardcoded value
$button-icon-padding: 6px;
.item {
&.item-multiple-buttons{
display: flex;
padding: 0 $item-padding;
.item-content{
flex: 1;
padding: $item-padding 0;
}
.buttons{
display: flex;
&.buttons-left{
margin-right: $item-padding - $button-icon-padding;
}
&.buttons-right{
margin-left: $item-padding - $button-icon-padding;
}
.button{
font-size: $item-icon-font-size;
}
}
}
}
Codepen: http://codepen.io/M1k3l/pen/PWBdOB
source to share