On login page I created a card and to close that card I added a close button ion-item but the issue is that when I click any where in the card horizontally with respect to the close the card closes (I just want the click function to work on the close button) also because of that i can’t make my card transparent.
below is my code:
html:
<ion-header>
<!--<ion-navbar>
<ion-title>usrlogin</ion-title>
</ion-navbar>-->
</ion-header>
<ion-content>
<div class="cardlogin">
<ion-card class="cardcol" style="border-radius:15px">
<ion-item class="close-btn"(click)="close();">
<ion-icon name="close-circle" item-right></ion-icon>
</ion-item>
<ion-card-header>
Admin Login
</ion-card-header>
<ion-card-content>
<ion-list no-lines>
<ion-item>
<ion-input input type="text" placeholder="Username" [(ngModel)]="username" name="username"></ion-input>
</ion-item>
<ion-item>
<ion-input input type="password" placeholder="Password" [(ngModel)]="password" name="password"></ion-input>
</ion-item>
</ion-list>
<button ion-button block color= "#3b5998"(click)="admnlgin()">Login</button>
<!--<a>Forgot Your Login Details</a>-->
</ion-card-content>
</ion-card>
</div>
</ion-content>
css:
page-admnlgin {
.scroll-content{
align-content: center;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
// justify-content: center;
//text-align: center;
// background-image: url("../assets/imgs/fbg.jpg");
// background-size: cover;
background-color: #3b5998
}
// ion-card.card{
// box-shadow: none;
// background: rgba(235, 235, 232, 0.267);
// .cardcol{
// background-color: transparent;
}