Html structure

So I’m doing this card and some items take more than one row messing up the whole card. Any ideas of how to fix it?

What I’m getting

department: Department
email:      Manager
phone:      sarah@gmail.com
            432432432

What I need

department: Department
            Manager
email:      sarah@gmail.com
phone:      432432432

my code

<ion-card>
  <ion-row>
    <div style="background-color: #2E856E; margin: 0%;padding: 10px; border-radius: 5px 5px 0px 0px; width: 100%;">
      <ion-card-title style="color: white;">{{item.First_Name +" "+ item.Last_Name}}</ion-card-title>
    </div>
    <ion-col>
      <ion-row>
        <p>Departament: </p>
      </ion-row>

      <ion-row>
        <p>Position:</p>
      </ion-row>

      <ion-row>
        <p>Email:</p>
      </ion-row>

      <ion-row>
        <p>Phone Number:</p>
      </ion-row>
    </ion-col>

    <ion-col>
      <ion-row>
        <p>{{item.Departament}}</p>
      </ion-row>

      <ion-row>
        <p>{{item.Position}}</p>
      </ion-row>

      <ion-row>
        <p>{{item.Email}}</p>
      </ion-row>

      <ion-row>
        <p>{{item.Phone_No}}</p>
      </ion-row>
    </ion-col>
  </ion-row>

</ion-card>

If you don’t get any better answers, what I do is to use CSS grid layout instead of Ionic’s grid. You should be able to achieve any desired layout with it.

1 Like

Update

Fixed it by creating a table

<div class="container" *ngFor="let item of productData">
  <ul class="responsive-table" >
    <li class="table-header">
      <ion-card-title style="color: white;" class="col col-5">{{item.First_Name +" "+ item.Last_Name}}</ion-card-title>
              
    </li>
    <li class="table-row" style="margin-top: 5px;" >
      <div class="col col-1">Staff ID:</div>
      <div class="col col-2" data-label="Staff ID:">{{item.Staff_ID}}</div>
    </li>
    <li class="table-row" >
      <div class="col col-1">Departament:</div>
      <div class="col col-2" data-label="Departament:">{{item.Departament}}</div>
    </li>
    <li class="table-row" >
      <div class="col col-1">Position:</div>
      <div class="col col-2" data-label="Position:">{{item.Position}}</div>
    </li>
    <li class="table-row" >
      <div class="col col-1">Email:</div>
      <div class="col col-2" data-label="Email:">{{item.Email}}</div>
    </li>
    <li class="table-row" style="margin-bottom: 5px;">
      <div class="col col-1">Phone Number:</div>
      <div class="col col-2" data-label="Phone Number:">{{item.Phone_No}}</div>
    </li>
  </ul>
  </div>

But that is not a <table>, but an unordered list with <div>s. I would also caution you NOT to use inline styles.

1 Like

Noted! :slight_smile: