Remove unwanted space


#1

Screenshot%20(167)

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


#2

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


#3

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

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

#5

Thanks @avishai_peretz_dev you saved my day!