Remove unwanted space

Screenshot%20(167)

How to remove the highlighted space that came after adding the arrow item icon??

Add your code snippet, then it would be easy for us to help you.

below is the .html

<ion-card>
 <div class="dashboard">
    <ion-item>
        <ion-icon name="arrow-dropright-circle" item-right (click)="orderDet()"></ion-icon>
    </ion-item>
  Visitors:<br>
  Address:<br>
  Details:<br>
  Status:<br>
 </div>
</ion-card>

below is the css:

page-dashboard {
.card-md{
    height: 0%;
    border-radius: 12px;
    background-color: #dadde3;
    font-size: 1.8rem;
    padding: 5px;
    border: 2px solid black;
}
ion-card{
display: inline-table;
}
.item{
    color: green;
}
}
<ion-card>
 <div class="dashboard">
        <ion-icon class="icon-item" name="arrow-dropright-circle" item-right (click)="orderDet()"></ion-icon>
  Visitors:<br>
  Address:<br>
  Details:<br>
  Status:<br>
 </div>
</ion-card>

css:

page-dashboard {
.card-md{
    height: 0%;
    border-radius: 12px;
    background-color: #dadde3;
    font-size: 1.8rem;
    padding: 5px;
    border: 2px solid black;
}
ion-card {
display: inline-table;

  .dashboard {
    position:relative;

    .icon-item {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
.item{
    color: green;
}
}
1 Like

Thanks @avishai_peretz_dev you saved my day!

1 Like