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

Popular posts from this blog

Magento/PHP - Get phones on all members in a customer group -

php - .htaccess mod_rewrite for dynamic url which has domain names -

Website Login Issue developed in magento -