0

For now I am displaying this enter image description here

I need to have all the cards same height. But the content inside is responsive so if the title is larger, it makes my card height larger. It is fetched from database.

I am using Angular. Content of file Field-list is:

<div class="card" *ngIf="jobFieldsList">
    <div class="row no-gutters">
        <div class="col-4 centering">
            <img [src]="imageUrl" class="img-fluid">
        </div>
        <div class="col">
            <div class="card-block px-2">
                <h6 class="card-title mt-3">{{jobFieldsList.nazivPodrocja[0].naziv}}</h6>
                <p class="card-text mb-2" style="margin-right: 20%;">število trenutno prostih 
                delovnih mest:</p>
            </div>
        </div>
    </div>
</div>

Content of file field-item is:

<div class="row">
    <div class="col-4 mb-4" *ngFor="let jobField of jobFieldsList">
        <app-job-fields-item [jobFieldsList]="jobField"></app-job-fields-item>
    </div>
</div>

I am trying to solve the problem but I can't.. I need to have all the cards height like the biggest card. It would be perfect

devZ
  • 606
  • 1
  • 7
  • 23
  • have you tried just defining a max heigh for the outer container? also would need to set up the overflow for inner components so if you have long text it ends up with ... – Camilo Casadiego Jan 21 '22 at 13:53
  • Yes I have triend but it doesn't work like I want. Problem look so simple but it is not hahah – devZ Jan 21 '22 at 14:06
  • have you tried this out? https://stackoverflow.com/questions/35868756/how-to-make-bootstrap-4-cards-the-same-height-in-card-columns – Camilo Casadiego Jan 21 '22 at 14:15
  • Yes it doesn't work because I am displaying it the "x" amount of times. Depends on the number of the records in database – devZ Jan 21 '22 at 14:17
  • Taking a second look, I think the issue is more related to the content of the card than the card itself, if you just limit the height, when you get a longer title, it'll look bad, I'll suggest just limiting the output length of both texts and that should do the trick, you can do it with css or just limite the length of jobFieldsList.nazivPodrocja[0].naziv – Camilo Casadiego Jan 21 '22 at 14:18
  • I am nto sure if this will work for me. I need to make every column's height the same but not by limiting the length of text – devZ Jan 21 '22 at 18:42
  • do you have a max text limit ? the reason I ask is because if you have a 10 chars text and a 500 chars text, the shortest one will have a lot of vertical space empty, is that the desired behaviour ? – Mauricio Gracia Gutierrez Jan 21 '22 at 22:18
  • text limit is 100 characters (the second card has like 88 so nearly maximum). – devZ Jan 22 '22 at 07:42
  • I somehow managed to have all fixed height but i needed to play around with css a little bit. Most important was specifying the ' !important ' tags. Thank you for your time – devZ Jan 22 '22 at 10:48

0 Answers0