Issue
The second button in a div is always lower than the first one across the entire project. The two buttons are have the same height: 30px.
If I have three buttons, the second and third one are aligned but are slightly lower than the first one.
This is just a table with one actions column that includes two buttons, but my problem is in the entire project.
button {
margin: 2px;
font-size: 12px !important;
}
.btn-primary {
background-color: darkslategrey !important;
border: none;
}
.btn-secondary {
background-color: darkblue !important;
border: none;
} <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<tbody>
<tr *ngFor="let financialPlatform of financialInstitutionsPage.content | paginate: financialInstitutionsPage">
<td>{{financialPlatform.name}}</td>
<td>{{financialPlatform.code}}</td>
<td>{{financialPlatform.country}}</td>
<td>{{financialPlatform.aisStatus | apiStatus | translate}}</td>
<td>{{financialPlatform.pisStatus | apiStatus | translate}}</td>
<td>{{financialPlatform.provider}}</td>
<td>
<div>
<button class="btn btn-secondary action btn-sm" (click)=navigateToDetails(financialPlatform.publicIdentifier)>
{{ 'general.button.details' | translate }}
</button>
<button class="btn btn-secondary action btn-sm" (click)="navigateToPlatforms(financialPlatform.publicIdentifier)">
{{'financial.institutions.overview.button.platforms' | translate}}
</button>
</div>
</td>
</tr>
</tbody>Solution
To ensure the child <button> elements nested in the parent <div> are aligned vertically, you can make the parent container a flexbox and use align-items: center so the flex items are centered along the cross axis.
.parent {
display: flex;
align-items: center;
}
.parent button {
margin: 2px;
font-size: 12px !important;
}
.btn-primary {
background-color: darkslategrey !important;
border: none;
}
.btn-secondary {
background-color: darkblue !important;
border: none;
}<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<tbody>
<tr *ngFor="let financialPlatform of financialInstitutionsPage.content | paginate: financialInstitutionsPage">
<td>
<div class="parent">
<button class="btn btn-secondary action btn-sm" (click)=navigateToDetails(financialPlatform.publicIdentifier)>Details</button>
<button class="btn btn-secondary action btn-sm" (click)="navigateToPlatforms(financialPlatform.publicIdentifier)">Platforms</button>
</div>
</td>
</tr>
</tbody>Answered By - Tanner Dolby
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.