2

Is it possible somehow to create a dynamic height nb-flip-card? I have the front of a card I have short info and a back where I would like to put more details:

<nb-flip-card>
  <nb-card-front>
    <nb-card accent="danger">
      <nb-card-body>
        <div class="row">
          <div class="status">
            Status:
            <nb-alert size="small" status="danger">Not Ok</nb-alert>
          </div>
          <div class="status">
            App name: adsa <br/>
            branch: dsadsa<br/>
            commitid: dsadsa<br/>
            date : dsadsa<br/>
          </div>
        </div>
      </nb-card-body>
    </nb-card>
  </nb-card-front>
  <nb-card-back>
    <nb-card>
      <nb-card-body>
        <table class="ci-table">
          <tr>
            <td rowspan="2">img</td>
            <td rowspan="2">name</td>
            <td>High</td>
          </tr>
          <tr>
            <td>Crit</td>
          </tr>
          <tr>
            <td rowspan="2">img</td>
            <td rowspan="2">name</td>
            <td>High</td>
          </tr>
          <tr>
            <td>Crit</td>
          </tr>
          <tr>
            <td rowspan="2">img</td>
            <td rowspan="2">name</td>
            <td>High</td>
          </tr>
          <tr>
            <td>Crit</td>
          </tr>
        </table>
      </nb-card-body>
    </nb-card>
  </nb-card-back>
</nb-flip-card>

but setting up like this ends up with front card being short overall card placeholder is taken for the back. it looks like that: enter image description here

is there a way to make it work properly?

Community
  • 1
  • 1
Mithrand1r
  • 2,313
  • 9
  • 37
  • 76

1 Answers1

1

i had the same issue!

i resolved by doing the following:

HTML:

<nb-flip-card [showToggleButton]=false [flipped]="flipped">
<nb-card-front>
    <nb-card>
        <nb-card-header>Approved</nb-card-header>
        <nb-card-body>
            <app-products-approved></app-products-approved>
        </nb-card-body>
        <nb-card-footer (click)="toggleFlip()">Go to pending products</nb-card-footer>
    </nb-card>
</nb-card-front>
<nb-card-back>
    <nb-card>
        <nb-card-header>Pending</nb-card-header>
        <nb-card-body>
            <app-products-not-approved></app-products-not-approved>
        </nb-card-body>
        <nb-card-footer (click)="toggleFlip()">Go to approved products</nb-card-footer>
    </nb-card>
</nb-card-back>

TS:

public flipped:boolean = false


public toggleFlip(){
  this.flipped = !this.flipped
}

Of course you can set the click event on the element you want ( in my case i did it on the footer)

charbel beainy
  • 21
  • 1