This isn’t speficially a wappler question. But how do you make all of the card box sizes the same, if the text is too long and stretches to a new line?
I don’t want to make all of the text too small to read to make it all fit? my card height is set at h-100
is there some sort of CSS magic to deal with this?
Hey @baub,
If we suppose that we forget about using text-truncate I would just try to find or imagine the max. character count for this element (eg 50 characters) and see if they fit in 2 lines. Then just add inline styling, min-height and max-height of the same amount let’s say 3rem for both…). It depends of the title element, is this an H6 or what…
Then you will end-up having 2 lines space for all Titles.
Just talking as I’m thinking…
But I’m curious if anybody has a solid-tested idea!
It seems the button click for more choices is part of the card-body instead of in a separate card-footer div. Try by adding a div below the card-body div like this:
<div class="card-footer">
<button class="btn btn-dark">click for more choices</button>
</div>
This is what I ended up with…
googled up some stuff
<div class="card-body d-flex flex-column">
<h3 class="card-title text-capitalize text-center align-items-center my-auto" dmx-text="subcategory" dmx-show="subcategory">Card title </h3>
<h4 class="card-title align-self-end" dmx-hide="subcategory">Uncategorized</h4>
<p class="card-text mt-auto">
<button id="btn1" class="btn btn-block btn-dark mt-1" dmx-on:click="varWhichOne.setValue(queryCount.total);varSubCategory.setValue(subcategory);flowDecide.run({})">Click for More Choices</button>
</p>
</div>
Had to add d-flex and flex-column to .car-body and then my-auto to the h3 and that centered the text vertically. So when it had two lines of text it was centered.
Ben’s solution is the way to go, adding a class h-100 will make all cards same size
Yeah I had that already on my card.
Can you post your code here? Be sure that the h-100 is applied to the card itself not the card body.
