0

enter image description hereI have created a full size button inside ion footer in a ion toolbar and the code looks like below

<ion-footer class="ion-no-border">
  <ion-toolbar style="--background:white">
    <ion-buttons>
      <ion-button (click)="continue()" color="secondary" fill="solid" class="sb-block-button">Save</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

however there is a gap on the right side in the footer. i do not want that and failed to remove it. what shoudl be done? here is how it looks enter image description here

Moblize IT
  • 1,140
  • 2
  • 18
  • 44

1 Answers1

0

I belive you have set up some CSS for the button but seems not working well. First, the button is not in the middle, so add some CSS here:

.sb-block-button {
    ......
    left: 50%;
    transform: translateX(-50%);
}

Second, button length may not be wide enough. So adjust the width/margins at the same place. You may do it yourself. Hope it works.

Chris.Z
  • 51
  • 5
  • well not really the answer and the css just has this : .sb-block-button { width: 315px; height: 40px; } looking at the inspector i see the button inside ion-buttons is left aligned by default, and i am failing to bring it to center – Moblize IT Mar 23 '23 at 02:40