[SOLVED] Card vertical alignment

General issues related to the use of Metro 4
Post Reply
User avatar
seabeebuc
Posts: 4
Joined: Tue Sep 11, 2018 12:43 am
Status: Offline

[SOLVED] Card vertical alignment

Post by seabeebuc » Fri Sep 14, 2018 2:45 am

When placing 3 cards across a row in a grid, the card in position 0 of each row, is vertically higher than the other two cards in the same row. I must be missing something, but I can't determine what. Here's a simple example (occurs in Edge, Chrome and Firefox on Windows 10):

<div class="grid">
<div class="row mt-2">
<div class="card cell-sm-3 cell-md-3 cell-lg-3 cell-xl-3 cell-xxl-3 drop-shadow">
<div class="card-header fg-blue">
<strong>Royal Group Exception Time</strong>
</div>
<div class="card-content p-2">
This is an exception report for those calls that had a queue time greater than 90 seconds for yesterday, assigned to 'Royal Group'.
</div>
<div class="card-footer">
<button class="image-button secondary outline bd-lightGray drop-shadow rounded">
<span class="mif-play icon"></span>
<span class="caption">Run Report</span>
</button>
</div>
</div>
<div class="card cell-sm-3 cell-md-3 cell-lg-3 cell-xl-3 cell-xxl-3 drop-shadow">
<div class="card-header fg-blue">
<strong>Rogue Squad Exception Hold Abandon</strong>
</div>
<div class="card-content p-2">
This is an exception report for those calls that came into Rogue Squad last week, that were abandoned by the customer, while they were on hold.
</div>
<div class="card-footer">
<button class="image-button secondary outline bd-lightGray drop-shadow rounded">
<span class="mif-play icon"></span>
<span class="caption">Run Report</span>
</button>
</div>
</div>
<div class="card cell-sm-3 cell-md-3 cell-lg-3 cell-xl-3 cell-xxl-3 drop-shadow">
<div class="card-header fg-blue">
<strong>Alpha Company Historical Vector</strong>
</div>
<div class="card-content p-2">
This is a vector report for calls that have 471 as the first vector in the routing configuration for Alpha Company, for the last month.
</div>
<div class="card-footer">
<button class="image-button secondary outline bd-lightGray drop-shadow rounded">
<span class="mif-play icon"></span>
<span class="caption">Run Report</span>
</button>
</div>
</div>
</div>
</div>
Last edited by seabeebuc on Fri Sep 14, 2018 8:38 pm, edited 1 time in total.

User avatar
seabeebuc
Posts: 4
Joined: Tue Sep 11, 2018 12:43 am
Status: Offline

Post by seabeebuc » Fri Sep 14, 2018 3:16 pm

Issue resolved, this was a layout error on my part. Here's how this 'should' look:

<div class="grid">
<div class="row mt-2">
<div class="cell-sm-3 cell-md-3 cell-lg-3 cell-xl-3 cell-xxl-3">
<div class="card drop-shadow">
<div class="card-header fg-blue">
<strong>Royal Group Exception Time</strong>
</div>
<div class="card-content p-2">....

Note that the cell size is defined separate, (before) the card.

Post Reply