Scroll error with ion-segment in ion-accordion

127 views Asked by At

I’ve got a scroll error with ion-segment.

When i click on the right segments, all the page move to left and break the design.

It’s due to the animation that center the active segment.

I'm using this arb

home.page.html

<ion-content>
 <ng-container *ngIf="loaded">
   <ion-accordion-group [multiple]="true" [value]="[]">
      <ion-accordion value="fourth">
       <ion-item slot="header">
         <ion-icon slot="start" name="cube"></ion-icon>
         <ion-label>{{ 'home.accordion.merch.title'|translate }}</ion-label>
         <ion-badge *ngIf="articlesCount" slot="end" color="warning">{{ articlesCount }}</ion-badge>
       </ion-item>
       <div class="ion-padding-vertical" slot="content">
         <app-merch (articlesCount)="onArticleCount($event)"></app-merch>
       </div>
     </ion-accordion>
   </ion-accordion-group>
 </ng-container>
</ion-content>

merch.page.html

<ion-toolbar color="default">
    <ion-segment [scrollable]="true"  color="success" (ionChange)="segmentChanged($event)" value="all">
        <ion-segment-button value="all">
            <ion-label>
                <ion-icon [src]="iconBoxOpen"></ion-icon>
            </ion-label>
        </ion-segment-button>
        <ion-segment-button value="0">
            <ion-label>
                <ion-icon [src]="iconSnowflake"></ion-icon>
            </ion-label>
        </ion-segment-button>
        
<!--        OTHER SEGMENTS-->
        
    </ion-segment>
</ion-toolbar>

<ng-container>
    <ion-title *ngIf="activeTab === 'all'" class="ion-margin-vertical">
        <ion-icon [src]="iconBoxOpen" class="ion-margin-end"></ion-icon>
        {{ 'merch.category.title.all'|translate }}
    </ion-title>

    <ion-title *ngIf="activeTab !== 'all'" class="ion-margin-vertical">
        {{ ('merch.category.title.category_' + activeTab)|translate }}
    </ion-title>

    <ion-searchbar animated="true" [placeholder]="'merch.search.placeholder' | translate" (ionChange)="onSearch($event)" (ionClear)="onClearSearch()"></ion-searchbar>

    <ng-container *ngFor="let articleGroup of filteredArticleGroups">
        
<!--        HERE THE TAB CONTENT-->
        
    </ng-container>
</ng-container>

Here is the result

before scroll

after scroll

Thank you for your help

0

There are 0 answers