CODEWITHSUNDEEP
htmlionic-framework
Ygor Fraga
Ygor Fraga

Reputation: 143

How to place a button next to a text?

Hey guys I need to place 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>

Upvotes: 3

Views: 17253

Answers (4)

Ygor Fraga
Ygor Fraga

Reputation: 143

The solution I found was this one:

<ion-list>
  <ion-item *ngFor="let service of services | orderBy: 'name'">
    <ion-label>{{service.name}}</ion-label>
    <button (click)="onActive(service.detalhe.id)" *ngIf="service.isActive" ion-button outline item-right>Desativar</button>
    <button (click)="onActive(service.detalhe.id)" *ngIf="!service.isActive" ion-button outline item-right>Ativar</button>
    <button (click)="openUpdatePage(service)" ion-fab mini color="secondary" item-right><ion-icon name="create"></ion-icon></button>
    <button (click)="deleteService(service)" ion-fab mini color="danger" item-right><ion-icon name="trash"></ion-icon></button>
  </ion-item>

Thank you all for the answers!

Upvotes: 1

coder8888
coder8888

Reputation: 157

Try using this in CSS.

        h2 {
        margin: 0;
        display: inline-block;
        }
     
    
         <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>

Upvotes: 7

Chanh Tran
Chanh Tran

Reputation: 231

Here is what you need:

<h2 style="display: inline;">{{service.name}}</h2>


<ion-list>
    <ion-item *ngFor="let service of services">
        <h2 style="display:inline;">{{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>

Upvotes: 3

Silvio Mayolo
Silvio Mayolo

Reputation: 70267

h2 is a block tag, which means it always tries to take up its own line. You can circumvent this by overriding its display style.

<ion-list>
    <ion-item *ngFor="let service of services">
        <h2 style="display:inline;">{{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>

But that's a very ad hoc solution. You really want to think, stylistically, about why you want it on the same line. Because using h2 as an inline tag is akin to telling the HTML engine "I want a header, but I don't want it to be a header". Perhaps consider setting up some text in a span and using CSS to make it bigger, if you're just going for enlarged text.

<ion-list>
    <ion-item *ngFor="let service of services">
        <span style="font-size:1.5em;font-weight:bold;">{{service.name}}</span>
        <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>

That gives you basically the same visual effect, but now you're not fighting against HTML to get it.

Upvotes: 2

Related Questions