Custom buttons view inside ion-card


#1

Hello,
I want to display two buttons inside ion-card on the end of item.
I want my interface to be like the above:
buttons

I try to do that and I get this as a result:
buttonnn

this is my view:

<ion-list no-lines *ngFor=" let list of Lists; let i = index">

      <ion-card>
        <ion-row [style.background-color]="getStyle(i, prelevement.lock,1,prelevement.strategeCode)">
                {{list.name}} - 
          </ion-col>
          <ion-col  col-3>
                <button width="10%" ion-button color="secondary" (click)="launchPrelevement( prelevement.type)">
                  <div  [hidden]="list .modify!=1">
                    MODIFIER
                  </div>
                  <div   [hidden]="list .modify==1">
                    DEMARRER
                  </div>
                </button>
          </ion-col>
        </ion-row>
      </ion-card>
    </ion-list>

the css:

  .button-md {
    height: 6.6rem!important;
  }

I have another probelm. When i change the size of the screen I got different view from the buttons.

How I can resolve that


#2

Please refer https://ionicframework.com/docs/components/#sliding-list

I hope this will help you


#3

Thank you for your reply
I want the same view but without sliding