Close button issue

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;
}

making card transparent won’t hide the content of it, like items or buttons

my basic need is to make the click function work on the close button only… and about the transparency I’m making it just for styling…

<ion-item class="close-btn">
     <ion-icon name="close-circle" item-right " (click)="close()"></ion-icon>
</ion-item>
2 Likes

Thanks FnnHuman, it was so silly mistake by me I was using the function in item instead of icon. Mybad!!!