Jesus Cabrita
Reputation: 375
How to set a same card Height in bootstrap 4
I cant make my cards have the same size
ive been working in this problem but i dont find a solucion at all... ive try it to use h-xxx, align-items-stretch and Height:100% but i cant make my cards have the same size, or the same height in this case
this is my actual code of what im doing
<div class="content">
<div class="container-fluid" style=" height:360px">
<div class="row align-items-stretch ">
<!-- DETALLES DEL PROYECTO -->
<div class="card h-100 w-40 ml-3" id="detalles" *ngFor="let c of proyectof">
<div class="card-header" align="center">
<h4 class="title">{{c.nombrep}}</h4>
</div>
<div class="container ">
<div class="row">
<div class="form-group col-md-6">
<label id="letras" for="Nombre">Nombre del Proyecto</label>
<input type="text" value={{c.nombrep}} class="form-control" id="NombreP" disabled name="NombreP"
maxlength="40" size="20">
</div>
<div class="form-group col-md-6">
<label for="ClienteP">Cliente</label>
<input type="text" value={{c.nombrecliente}} class="form-control" disabled id="ClienteP" name="ClienteP"
maxlength="20" size="20">
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="AdminP">Administrador del Proyecto</label>
<input type="text" value={{persona}} pattern="[A-Za-z]+" disabled class="form-control" id="AdminP"
name="AdminP" maxlength="40" size="20">
</div>
<div class="form-group col-md-6">
<label for="CodigoP">Codigo</label>
<input type="text" pattern="[+#*\d*]+" value={{c.numero}} disabled maxlength="10" class="form-control"
id="CodigoP" name="CodigoP" maxlength="40">
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="FechaIP">Fecha de Inicio</label>
<input type="text" value="{{c.fechaini | date: 'yyyy-MM-dd'}}" class="form-control btn-outline-secondary"
disabled id="FechaIP">
</div>
<div class="form-group col-md-6">
<label for="FechaCP">Fecha de Culminacion</label>
<input type="text" value="{{c.fechafin | date: 'yyyy-MM-dd'}}" class="form-control btn-outline-secondary"
disabled id="FechaCP">
</div>
</div>
<div class="row justify-content-center">
<div class="form-group ">
<label>Plataforma</label><br />
<select class="btn btn-outline-secondary" disabled style="border-color:rgba(165, 157, 157, 0.664)">
<option *ngIf="c.tipo=='USSD'" value="1">USSD</option>
<option *ngIf="c.tipo=='SMS'" value="1">SMS</option>
</select>
</div>
</div>
</div>
</div>
<!-- CASOS DE PRUEBA -->
<div class="card h-100 ml-3 d-flex " id="card">
<div class="card-header" align="center">
<p class="text-muted">Casos de Pruebas Creados</p>
</div>
<!-- <div class="header" align="center" style="padding-top:15px">
<p class="text-muted">Casos de Pruebas Creados</p>
</div> -->
<div id="tabla" class="table-responsive text-nowrap" style="overflow:auto;">
<table class="table table-hover">
<thead class="text-black-50">
<tr id="personalizacion">
<th>
<div class="checkbox custom-control custom-checkbox">
<mat-checkbox color="primary" id="uno" [checked]="checkBoxMayor" type="checkbox"
(change)="checkAll()"></mat-checkbox>
<label for="checkbox1"></label>
</div>
</th>
<th scope="col">Nombre del Caso</th>
<th scope="col">Estatus</th>
<th scope="col">Herramientas</th>
</tr>
</thead>
<tbody *ngFor="let a of casosdeprueba; let b = index">
<tr>
<td>
<div class="checkbox">
<mat-checkbox color="primary" #box id='{{a.idcdp}}/{{a.nombrecdp}}' [checked]="check"
type="checkbox" (change)="cambiarCheckbox($event, box.id)"></mat-checkbox>
<label for={{a.idcdp}}></label>
</div>
</td>
<!-- Esto es lo que estaba dentro del tb del nombre del caso prueba
display:block;text-overflow: ellipsis;width: 150px;overflow: hidden;
y fue removido dejando solo esto
white-space: nowrap;
-->
<td style="white-space: nowrap" mat-raised-button matTooltip={{a.nombrecdp}}>{{a.nombrecdp}}</td>
<td mat-raised-button matTooltip="Sin Ejecutar" *ngIf="a.idestado === 2 && a.proceso!='ejecutando'">
<button class="tune" type="submit"><i class="fa fa-circle pointer" style="color:yellow"></i></button>
</td>
<td mat-raised-button matTooltip="Exitoso, presione para conocer mas detalles"
*ngIf="a.idestado === 0 && a.proceso!='ejecutando'"> <button class="tune"
[routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit"><i
class="fa fa-circle text-success pointer"></i></button>
</td>
<td mat-raised-button matTooltip="Fallido, presione para conocer mas detalles"
*ngIf="a.idestado === 1 && a.proceso!='ejecutando'"><button class="tune"
[routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit"><i
class="fa fa-circle text-danger pointer"></i></button>
</td>
<td *ngIf="a.proceso === 'ejecutando'">
<div class="loader" id="loader">Loading...</div>
</td>
<td>
<div class="btn-group btn-group-justified ">
<!-- <button [routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit" class="btn btn-primary">Estado</button> -->
<button class="tune" [routerLink]="['/Gestion/Historial_del_caso', id, a.idcdp]" type="submit"><i
class="icon" mat-raised-button matTooltip="Histórico" class="material-icons pointer">
description
</i></button>
<button class="tune" [routerLink]="['/Gestion/Detalles_del_caso', id, a.idcdp]" type="submit"><i
mat-raised-button matTooltip="Descripción" class="material-icons pointer">
remove_red_eye
</i></button>
</div>
<div class="btn-group btn-group-justified ">
<button class="tune" [routerLink]="['/Gestion/Modificando', id, a.idcdp]" type="submit"><i
mat-raised-button matTooltip="Editar caso de prueba" class="material-icons pointer">
create
</i></button>
<button class="tune" [routerLink]="['/Gestion/Copiando', id, a.idcdp]" type="submit"><i
mat-raised-button matTooltip="Copiar caso de prueba" class="material-icons pointer">
file_copy
</i></button>
<button class="tune" (click)="borrarcdp(a.idcdp)" type="submit"><i mat-raised-button
matTooltip="Eliminar Caso de Prueba" class="material-icons pointer">
delete
</i></button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer text-muted text-center">
<div class="btn-group btn-group-justified ">
<!-- <button [routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit" class="btn btn-primary">Estado</button> -->
<button *ngIf="show4" class="tune" type="submit" (click)="iniEjecucion()"><i class="icon" mat-raised-button
matTooltip="Ejecutar Casos de Prueba" class="material-icons pointer">
directions_run
</i></button>
<button *ngIf="!show4" class="tune" type="submit" disabled><i class="icon" mat-raised-button
matTooltip="Ejecutar Casos de Prueba" class="material-icons pointer">
directions_run
</i></button>
<button *ngIf="show4" class="tune" type="submit" data-toggle="modal" data-target="#datos">
<i mat-raised-button matTooltip="Agendar Ejecucion de Proyectos"
class="material-icons pointer">
alarm
</i></button>
<button *ngIf="!show4" class="tune" disabled type="submit"><i mat-raised-button
matTooltip="Agendar Ejecucion de Proyectos" class="material-icons pointer">
alarm
</i></button>
<button class="tune" [routerLink]="['/Gestion/Creando_caso_de_prueba', id ]" type="submit"><i
mat-raised-button matTooltip="Crear un nuevo Caso de Prueba" class="material-icons pointer">
add_circle
</i></button>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#datos">Agendar
</button>
</div>
</div>
</div>
</div>
</div>
this is what i get with the code that i attached
but i need my two cards with the same height , the problem itsef comes when i add more items to my table, because its start to grow, and overpass the height of the left card, if a set a static heigth, the card losses his responsive feature
Upvotes: 0
Views: 1448
Answers (2)
Gigi
Reputation: 353
https://getbootstrap.com/docs/4.0/components/card/#card-groups https://getbootstrap.com/docs/4.0/components/card/#card-decks
Check out card groups and decks. These create uniform sizing. You can also look into how this is implemented to learn how to do it manually if desired.
Upvotes: 0
UnpassableWizard
Reputation: 1279
i think in this situation the only thing is to set a fixed height like, height: 500px, or 50vh.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>
.align-items-stretch.row {
height: 50vh;
}
</style>
<div class="content">
<div class="container-fluid" style=" height:360px">
<div class="row align-items-stretch ">
<!-- DETALLES DEL PROYECTO -->
<div class="card h-100 w-40 ml-3" id="detalles" *ngFor="let c of proyectof">
<div class="card-header" align="center">
<h4 class="title">{{c.nombrep}}</h4>
</div>
<div class="container ">
<div class="row">
<div class="form-group col-md-6">
<label id="letras" for="Nombre">Nombre del Proyecto</label>
<input type="text" value={{c.nombrep}} class="form-control" id="NombreP" disabled name="NombreP"
maxlength="40" size="20">
</div>
<div class="form-group col-md-6">
<label for="ClienteP">Cliente</label>
<input type="text" value={{c.nombrecliente}} class="form-control" disabled id="ClienteP" name="ClienteP"
maxlength="20" size="20">
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="AdminP">Administrador del Proyecto</label>
<input type="text" value={{persona}} pattern="[A-Za-z]+" disabled class="form-control" id="AdminP"
name="AdminP" maxlength="40" size="20">
</div>
<div class="form-group col-md-6">
<label for="CodigoP">Codigo</label>
<input type="text" pattern="[+#*\d*]+" value={{c.numero}} disabled maxlength="10" class="form-control"
id="CodigoP" name="CodigoP" maxlength="40">
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="FechaIP">Fecha de Inicio</label>
<input type="text" value="{{c.fechaini | date: 'yyyy-MM-dd'}}" class="form-control btn-outline-secondary"
disabled id="FechaIP">
</div>
<div class="form-group col-md-6">
<label for="FechaCP">Fecha de Culminacion</label>
<input type="text" value="{{c.fechafin | date: 'yyyy-MM-dd'}}" class="form-control btn-outline-secondary"
disabled id="FechaCP">
</div>
</div>
<div class="row justify-content-center">
<div class="form-group ">
<label>Plataforma</label><br />
<select class="btn btn-outline-secondary" disabled style="border-color:rgba(165, 157, 157, 0.664)">
<option *ngIf="c.tipo=='USSD'" value="1">USSD</option>
<option *ngIf="c.tipo=='SMS'" value="1">SMS</option>
</select>
</div>
</div>
</div>
</div>
<!-- CASOS DE PRUEBA -->
<div class="card h-100 ml-3 d-flex " id="card">
<div class="card-header" align="center">
<p class="text-muted">Casos de Pruebas Creados</p>
</div>
<!-- <div class="header" align="center" style="padding-top:15px">
<p class="text-muted">Casos de Pruebas Creados</p>
</div> -->
<div id="tabla" class="table-responsive text-nowrap" style="overflow:auto;">
<table class="table table-hover">
<thead class="text-black-50">
<tr id="personalizacion">
<th>
<div class="checkbox custom-control custom-checkbox">
<mat-checkbox color="primary" id="uno" [checked]="checkBoxMayor" type="checkbox"
(change)="checkAll()"></mat-checkbox>
<label for="checkbox1"></label>
</div>
</th>
<th scope="col">Nombre del Caso</th>
<th scope="col">Estatus</th>
<th scope="col">Herramientas</th>
</tr>
</thead>
<tbody *ngFor="let a of casosdeprueba; let b = index">
<tr>
<td>
<div class="checkbox">
<mat-checkbox color="primary" #box id='{{a.idcdp}}/{{a.nombrecdp}}' [checked]="check"
type="checkbox" (change)="cambiarCheckbox($event, box.id)"></mat-checkbox>
<label for={{a.idcdp}}></label>
</div>
</td>
<!-- Esto es lo que estaba dentro del tb del nombre del caso prueba
display:block;text-overflow: ellipsis;width: 150px;overflow: hidden;
y fue removido dejando solo esto
white-space: nowrap;
-->
<td style="white-space: nowrap" mat-raised-button matTooltip={{a.nombrecdp}}>{{a.nombrecdp}}</td>
<td mat-raised-button matTooltip="Sin Ejecutar" *ngIf="a.idestado === 2 && a.proceso!='ejecutando'">
<button class="tune" type="submit"><i class="fa fa-circle pointer" style="color:yellow"></i></button>
</td>
<td mat-raised-button matTooltip="Exitoso, presione para conocer mas detalles"
*ngIf="a.idestado === 0 && a.proceso!='ejecutando'"> <button class="tune"
[routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit"><i
class="fa fa-circle text-success pointer"></i></button>
</td>
<td mat-raised-button matTooltip="Fallido, presione para conocer mas detalles"
*ngIf="a.idestado === 1 && a.proceso!='ejecutando'"><button class="tune"
[routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit"><i
class="fa fa-circle text-danger pointer"></i></button>
</td>
<td *ngIf="a.proceso === 'ejecutando'">
<div class="loader" id="loader">Loading...</div>
</td>
<td>
<div class="btn-group btn-group-justified ">
<!-- <button [routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit" class="btn btn-primary">Estado</button> -->
<button class="tune" [routerLink]="['/Gestion/Historial_del_caso', id, a.idcdp]" type="submit"><i
class="icon" mat-raised-button matTooltip="Histórico" class="material-icons pointer">
description
</i></button>
<button class="tune" [routerLink]="['/Gestion/Detalles_del_caso', id, a.idcdp]" type="submit"><i
mat-raised-button matTooltip="Descripción" class="material-icons pointer">
remove_red_eye
</i></button>
</div>
<div class="btn-group btn-group-justified ">
<button class="tune" [routerLink]="['/Gestion/Modificando', id, a.idcdp]" type="submit"><i
mat-raised-button matTooltip="Editar caso de prueba" class="material-icons pointer">
create
</i></button>
<button class="tune" [routerLink]="['/Gestion/Copiando', id, a.idcdp]" type="submit"><i
mat-raised-button matTooltip="Copiar caso de prueba" class="material-icons pointer">
file_copy
</i></button>
<button class="tune" (click)="borrarcdp(a.idcdp)" type="submit"><i mat-raised-button
matTooltip="Eliminar Caso de Prueba" class="material-icons pointer">
delete
</i></button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer text-muted text-center">
<div class="btn-group btn-group-justified ">
<!-- <button [routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit" class="btn btn-primary">Estado</button> -->
<button *ngIf="show4" class="tune" type="submit" (click)="iniEjecucion()"><i class="icon" mat-raised-button
matTooltip="Ejecutar Casos de Prueba" class="material-icons pointer">
directions_run
</i></button>
<button *ngIf="!show4" class="tune" type="submit" disabled><i class="icon" mat-raised-button
matTooltip="Ejecutar Casos de Prueba" class="material-icons pointer">
directions_run
</i></button>
<button *ngIf="show4" class="tune" type="submit" data-toggle="modal" data-target="#datos">
<i mat-raised-button matTooltip="Agendar Ejecucion de Proyectos"
class="material-icons pointer">
alarm
</i></button>
<button *ngIf="!show4" class="tune" disabled type="submit"><i mat-raised-button
matTooltip="Agendar Ejecucion de Proyectos" class="material-icons pointer">
alarm
</i></button>
<button class="tune" [routerLink]="['/Gestion/Creando_caso_de_prueba', id ]" type="submit"><i
mat-raised-button matTooltip="Crear un nuevo Caso de Prueba" class="material-icons pointer">
add_circle
</i></button>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#datos">Agendar
</button>
</div>
</div>
</div>
</div>
</div>Upvotes: 1
Related Questions
- Bootstrap card header - same height for all
- Bootstrap cards aligned vertically not responsive
- Bootstrap4 make card headers the same height
- CSS make card the same height running React and Bootstrap
- Make Bootstrap card same height
- Bootstrap - How would I get all of the cards to be the same height?
- How can I set equal max height of bootstrap 4 cards regardless of their content?
- Angular Cards to be the same height in a flex-layout row
- Setting same height for all cards in Horizontal layout
- Same Height Cards in Ionic