Elements Overlap When Scrolling

Here’s what’s in my ion-content:

  <ng-container *ngFor="let item of weeklySchedule; let i = index" [style.z-index]="i + 10">

    <ion-grid>
  
      <ion-row class="ion-justify-content-between ion-align-items-center">
        <ion-col>
          <span [textContent]="item.name"></span>
        </ion-col>
        <ion-col size="auto">
          <ion-item lines="none">
            <ion-checkbox labelPlacement="end" justify="start" checked (ionChange)="isClosed(i, $event)">Closed</ion-checkbox>
          </ion-item>
        </ion-col>
      </ion-row>
    
      <ion-row class="ion-justify-content-between ion-align-items-center" [style.display]="item.is_closed ? 'none' : ''">
        <ion-col size="4.5">
          <ion-item lines="none">
            <ion-input label="Opens at" labelPlacement="floating" type="time" [(ngModel)]="item.am_opening"></ion-input>
          </ion-item>
        </ion-col>
    
        <ion-col size="4.5">
          <ion-item lines="none">
            <ion-input label="Opens at" labelPlacement="floating" type="time" [(ngModel)]="item.am_closing"></ion-input>
          </ion-item>
        </ion-col>
    
        <ion-col size="auto">
          <ion-button (click)="addSecondOpening(i)">
            <ion-icon name="add"></ion-icon>
          </ion-button>
        </ion-col>
      </ion-row>
    
      <ion-row class="ion-justify-content-between ion-align-items-center" [style.display]="item.has_second_opening ? '' : 'none'">
        <ion-col size="4.5">
          <ion-item lines="none">
            <ion-input label="Opens at" labelPlacement="floating" type="time" [(ngModel)]="item.pm_opening"></ion-input>
          </ion-item>
        </ion-col>
    
        <ion-col size="4.5">
          <ion-item lines="none">
            <ion-input label="Opens at" labelPlacement="floating" type="time" [(ngModel)]="item.pm_closing"></ion-input>
          </ion-item>
        </ion-col>
    
        <ion-col size="auto">
          <ion-button (click)="removeSecondOpening(i)">
            <ion-icon name="trash-outline"></ion-icon>
          </ion-button>
        </ion-col>
      </ion-row>
    
    </ion-grid>
  
  </ng-container>

Typescript:

public weeklySchedule: any = [
    { name: 'Monday', am_opening: null, am_closing: null, pm_opening: null, pm_closing: null, is_closed: true, has_second_opening: false},
    { name: 'Tuesday', am_opening: null, am_closing: null, pm_opening: null, pm_closing: null, is_closed: true, has_second_opening: false},
    { name: 'Wednesday', am_opening: null, am_closing: null, pm_opening: null, pm_closing: null, is_closed: true, has_second_opening: false},
    { name: 'Thursday', am_opening: null, am_closing: null, pm_opening: null, pm_closing: null, is_closed: true, has_second_opening: false},
    { name: 'Friday', am_opening: null, am_closing: null, pm_opening: null, pm_closing: null, is_closed: true, has_second_opening: false},
    { name: 'Saturday', am_opening: null, am_closing: null, pm_opening: null, pm_closing: null, is_closed: true, has_second_opening: false},
    { name: 'Sunday', am_opening: null, am_closing: null, pm_opening: null, pm_closing: null, is_closed: true, has_second_opening: false},
  ];

  constructor() {}

  ngOnInit() {}

  isClosed(index: number, event: any): void{
    if(!event.detail.checked){
      this.weeklySchedule[index].is_closed = false;
    }else{
      this.weeklySchedule[index].is_closed = true;
      this.removeSecondOpening(index)
    }
  }

  addSecondOpening(index: number): void{
      this.weeklySchedule[index].has_second_opening = true;
  }

  removeSecondOpening(index: number): void{
      this.weeklySchedule[index].has_second_opening = false;
  }

Stylesheet:

ion-grid{
    border-bottom: 1px solid rgba(var(--wahooo-text-color-rgb), 0.07);
    margin-bottom: 16px;
    width: 100%;
    position: relative; 

    &:last-child{
        border-bottom: 0;
    }

    ion-row{
        ion-col{
            padding: 0;

            span{
                font-size: .85rem;
                font-weight: bold;
            }

            ion-item{
                --background: transparent;
                --padding-bottom: 0;
                --padding-top: 0;
                --padding-start: 12px;
                --padding-end: 12px;
                --inner-padding-bottom: 0;
                --inner-padding-top: 0;
                --inner-padding-start: 0;
                --inner-padding-end: 0;
                --border-radius: 20px;
                width: fit-content;
                margin: 0;
                font-size: .8rem;
    
                ion-checkbox {
                    --checkbox-background-checked: #0058F5;
                    --border-color-checked: #0058F5;
                }
    
                ion-checkbox::part(container) {
                    border-radius: 6px;
                    --checkbox-background: var(--wahooo-secondary-bg-color);
                    --border-color: var(--wahooo-secondary-bg-color);
                }
    
                ion-input{
                    --background: var(--wahooo-secondary-bg-color);
                    --padding-start: 12px;
                    --padding-end: 12px;
                    --border-radius: 20px;
                    font-size: .85rem;
                    --highlight-color-focused: var(--ion-color-primary);
                    --highlight-color-valid: var(--ion-color-primary);
                    --highlight-color-invalid: var(--ion-color-primary);
                
                    .label-text{
                        opacity: .5 !important;
                    }
                }
            }

            ion-button{
                height: 55px;
                width: 55px;
                --border-radius: 50%;
                --background: var(--wahooo-secondary-bg-color);
                --box-shadow: 0;
            }
        }

        &:nth-child(2), &:nth-child(3){
            ion-item{
                width: 100% !important;
                --padding-start: 0px !important;
                --padding-end: 0px !important;
            }
        }

        &:nth-child(2) ion-button{
            color: var(--ion-color-primary);
            ion-icon{
                font-size: 1.5rem;
            }
        }

        &:nth-child(3) ion-button{
            color: var(--ion-color-danger);
            margin-bottom: 16px;
        }
    }
}

I’m using ionic 7 - Angular - Capacitor. This was tested using an Android device

1 post - 1 participant

Read full topic