Ionic-selectable cancel button position

Hey I’m using this component from a package and it’s amazing but I have 1 problem, the CANCEL button is always on the top, I can change it from left to right as the doc suggests, using ionic slots, but isn’t there a way to put it near the OK button?


I will get rid of the clear button cuz I don’t want it, I just enabled it to show u where I want the cancel to be, but so far I’ve had no luck putting it there.

My code just in case

    <ion-item>
      <ion-label>Utilizadores</ion-label>
      <ionic-selectable #selectUtilizadores
        [isMultiple]="true"
        [(ngModel)]="utilizadores"
        [items]="todosUtilizadores"
        itemValueField="id"
        itemTextField="nome"
        [canSearch]="true"
        (onChange)="usersChanged($event)"
        [canClear]="true"
        [shouldStoreItemValue]="false"
        [hidden]="true"
        closeButtonSlot="end">
      </ionic-selectable>
    </ion-item>

Have you contacted the package’s author?

Yeah at the same time of posting this here, I just tried my lucky by posting here who knows mby someone knew ahah

A sound plan… Wonder if it might be faster to build something yourself, if you think your Ionic skills are ready.

Just if anyone stumbles upon this in the future, I created a custom header and a custom footer

<ion-item>
      <ionic-selectable #selectUtilizadores
        [isMultiple]="true"
        [(ngModel)]="utilizadores"
        [items]="todosUtilizadores"
        itemValueField="id"
        itemTextField="nome"
        [canSearch]="true"
        (onChange)="usersChanged($event)"
        [shouldStoreItemValue]="false"
        closeButtonSlot="start"
        closeButtonText="Cancelar"
        [canClear]="true"
        clearButtonText="Limpar">

        <ng-template ionicSelectableHeaderTemplate>
          <ion-toolbar>
                // won't share my code but this is where i have my buttons for the header
          </ion-toolbar>
        </ng-template>
        
        <ng-template ionicSelectableFooterTemplate>
            <ion-toolbar>
              // ok here's an example
              <div class="customFooter">
                  <ion-button class="bottomButtons" expand="block" color="phc" mode="md" (click)="confirm()">
                    <ion-icon name="save" style="font-size: 20px; padding-right:3px;"></ion-icon>
                    <p style="font-size: 20px;">{{selectUtilizadores.confirmButtonText}}</p>
                  </ion-button>
                  <ion-button class="bottomButtons" expand="block" color="phcdark" mode="md" (click)="selectUtilizadores.close()">
                    <ion-icon name="close" style="font-size: 24px; padding-right:2px;"></ion-icon>
                    <p style="font-size: 20px;">{{selectUtilizadores.closeButtonText}}</p>
                  </ion-button>
              </div>
            </ion-toolbar>
         </ng-template>
      </ionic-selectable>
    </ion-item>