android - Buttons in list item overflows when using item-button-right -
i have 3 buttons in each list item, want display them next each other on right hand side, if add "item item-button-right"
items moves right overflows each other , looks 1 button. have tried <ul></ul>
buttons beneath item text.
html <ion-list> <ion-item class="item item-button-right"> make , model: <ul> <button class="button button-positive"> <i class="icon ion-checkmark-round"></i> </button> <button class="button button-positive"> <i class="icon ion-close-round"></i> </button> <button class="button button-positive"> <i class="icon ion-ios-camera"></i> </button> </ul> </ion-item> <ion-item class="item-positive" href="#/app/checklist"> next </ion-item> </ion-list>
thanks in advance.
i have added codepen demostrate 1 solution through css.
the relevant added css:
.item.morebuttons button { margin-top: -5px; } /* first */ .item.morebuttons button:nth-child(2) { margin-top: 35px; } /* second */ .item.morebuttons button:last-child { margin-top: 75px; } /* thrid */
also don't forget set class on <ion-item>
element, this:
<ion-item class="item item-button-right morebuttons">
Comments
Post a Comment