How Can I Show Two Icons As Right Aligned Within An Ionic List?

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:

<divclass="item item-button-right">
                List item 1  
                <divclass="buttons"><buttonclass="button button-energized"><iclass="icon ion-android-locate"></i></button><buttonclass="button button-dark"><iclass="icon ion-android-arrow-forward"></i></button></div></div>

Also noticed your code pen attachment so thought i'd update that too to demonstrate.

http://codepen.io/anon/pen/bNjypG

Solution 2:

Here is an example

<ion-viewng-controller="inspectorsCtrl as vm"><ion-contentclass="has-header"><ion-list><ion-itemng-repeat=" item in vm.items"class="item-icon-right">
                {{item.info}}
                <iclass="icon ion-chevron-right icon-accessory"></i></ion-item></ion-list></ion-content></ion-view>

Solution 3:

Try like this:

First take one div class and then take 2 buttons inside the div tag.

<divclass="buttons" ><buttonclass="button button-icon" ><iclass = "icon ion-funnel"></i></button><buttonclass="button button-icon" ><iclass = "icon ion-android-document"></i></button></div>

Solution 4:

The solution using .buttons works only if the text is not long or if there are only two icons.

Along with flexbox it works in any situation.

<ion-list><ion-itemng-repeat="item in items"class='item-multiple-buttons'
  ><divclass="buttons buttons-left"><buttonclass="button button-icon ion-checkmark-circled"></button><buttonclass="button button-icon ion-information-circled"></button></div><divclass="item-content" >
          {{$index + 1}}. Lorem ipsum dolor sit amet, consectetur adipisicing elit
        </div><divclass="buttons buttons-right"><buttonclass="button button-icon ion-close-circled"></button><buttonclass="button button-icon ion-help-circled"></button><buttonclass="button button-icon ion-minus-circled"></button><buttonclass="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-padding0;
    }

    .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