# Change bottom property of ion-modal

**URL:** <https://forum.ionicframework.com/t/change-bottom-property-of-ion-modal/230061>\
**Category:** Ionic Framework\
**Created:** [January 5, 2023, 6:09pm UTC](https://forum.ionicframework.com/t/change-bottom-property-of-ion-modal/230061 "2023-01-05T18:09:08Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![manarmohammad](https://avatars.discourse-cdn.com/v4/letter/m/ec9cab/32.png) [@manarmohammad](https://forum.ionicframework.com/u/manarmohammad)\
**Post date:** [January 5, 2023, 6:09pm UTC](https://forum.ionicframework.com/t/change-bottom-property-of-ion-modal/230061/1 "2023-01-05T18:09:08Z")

</div>

i have the following modal

```auto
<ion-modal [isOpen]="isModalOpen" [backdropDismiss]="false">
  <ng-template>
  
    <ion-content class="ion-padding-start">

      <ion-list>
        <ion-item (click)="Orders(1)">
          <ion-icon name="reorder-four-outline"></ion-icon>
          <ion-label class="ion-padding-start">
                all
          </ion-label>
        </ion-item>

         <ion-item (click)="Orders(2)">
          <ion-icon name="download-outline"></ion-icon>
            <ion-label class="ion-padding-start">
              new orders
            </ion-label>
          </ion-item>

           <ion-item (click)="Orders(3)">
            <ion-icon name="checkmark-outline"></ion-icon>
              <ion-label class="ion-padding-start">
                accepted orders
              </ion-label>
           </ion-item>
      </ion-list>
    </ion-content>
  </ng-template>
</ion-modal>

```

this modal appears when clicking on tab1, so i want it in the bottom left corner of screen. i succeeded with that with top property, but that’s not what i want , i want to use bottom property to exclude tabs height. bottom property doesn’t take any effect

```auto
ion-modal {
  position:absolute;
  width: 60% !important;
  height: 350px !important;
  top: calc(50% - (60px)); // 60 is tabs height but with top property it will change in different screens , i want it to be bottom: 60px;
  right:calc(100% - 65%); 
    --border-radius: 16px;
    --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  }

```

![Capture](https://global.discourse-cdn.com/ionicframework/original/3X/4/5/454ae702a3f0ecdba12ccbffe57939620c63a6ce.png)

---

<div class="post-metadata">

**Author:** ![mani0011](https://avatars.discourse-cdn.com/v4/letter/m/9e8a1a/32.png) [@mani0011](https://forum.ionicframework.com/u/mani0011)\
**Post date:** [January 9, 2023, 12:39pm UTC](https://forum.ionicframework.com/t/change-bottom-property-of-ion-modal/230061/2 "2023-01-09T12:39:02Z")

</div>

Use modalcontroller.