How to let a button next to a text?

Ionic Framework ionic-v3
1

Hey guys I need to let these two buttons next to a name, how can I do that? They always appear below the word.

<ion-list>
    <ion-item *ngFor="let service of services">
        <h2>{{service.name}}</h2>
        <button ion-fab mini color="danger"><ion-icon name="trash"></ion-icon></button>
        <button ion-fab mini color="secondary"><ion-icon name="create"></ion-icon></button>
    </ion-item>
</ion-list>
2

Inspect the h2 in your browser’s dev tools and see what you can change to make it not throw everything behind it into a new line. The same would happen to normal text instead of buttons.

3

But what kind of changes?

4

try

<h2>{{service.name}} <button>....</button></h2>
5

Adding float:left for example could work.

6

It didn’t work. That’s weird.

7

FABs are not suitable for this use case, do read about them FABs

Here is what you should do:


<ion-list>
   <ion-item *ngFor="let service of services">
      <h2>{{service.name}}</h2>
      <button ion-button color="danger" item-right><ion-icon name="trash"></ion-icon></button>
      <button ion-button color="secondary" item-right><ion-icon name="create"></ion-icon></button>
   </ion-item>
</ion-list>