NG-ZORRO nz-card in-body aligment

Question

It's related to the usage of the nz-card in ng-zorro.

I'm trying to align the styled action buttons within the card body without success.

I'm expecting that the height of the cards is the same, so visually the bottom border of all are is vertically aligned. The button is at the bottom of each card.

Example under: https://stackblitz.com/edit/angular-py7awb

Hopefully using generic a standard way that can be used as a best practice.

Answer 1

this puts the button straight to the bottom, the "1rem" will add a distance from bottom to top with respect to the parent div (in this case the "nz-card")

 <div nz-col nzXs="8">
    <nz-card nzTitle="Where does it come from?" style="height: 100%">
      <div style="margin-bottom:2rem">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
      </div>
      <div nz-row nzType="flex" nzJustify="space-between" style="position:absolute; bottom:1rem">
          <button nz-button nzType="primary" nzAlign="bottom"  >Ask more</button>
      </div>
    </nz-card>
  </div>

in the case of the "Ask More" button you'll need to remove the surrounding "div" since it will be positioned at the bottom of the first parent div and not the "nz-card" bottom

the only problem is that if the text is too much it will overlap with the button, that is why I added a div surrounding the text with the margin of 2 rem to give space to the button

<div style="margin-bottom:2rem">
            <p>Lorem Ipsum is simply </p>
</div>