ionic-team/ionic-framework

bug: Swipeable Segments - vertical scrolling should be disabled

Hesesses opened this issue · 11 comments

Hesesses commented

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

When swiping between the views, it should only scroll horizontally, not vertically

See video:

RPReplay_Final1730847719.MP4

Expected Behavior

Only scrolling horizontally

See video:

RPReplay_Final1730847678.MP4

Steps to Reproduce

See both videos above

Code Reproduction URL

no url

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/Users/.../.nvm/versions/node/v18.20.4/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 8.4.0
@angular-devkit/build-angular : 17.3.11
@angular-devkit/schematics : 17.3.11
@angular/cli : 17.3.11
@ionic/angular-toolkit : 11.0.1

Capacitor:

Capacitor CLI : 6.1.2
@capacitor/android : 6.1.2
@capacitor/core : 6.1.2
@capacitor/ios : 6.1.2

Utility:

cordova-res : not installed globally
native-run : 2.0.1

System:

NodeJS : v18.20.4 (/Users/.../.nvm/versions/node/v18.20.4/bin/node)
npm : 10.7.0
OS : macOS Unknown

Additional Information

No response

moberwasserlechner commented

I experience the same behavior using the latest ionic version.

As a workaround until this is fixed I put an "ion-content" inside of the "ion-segment-content"

<ion-segment-view>
  <ion-segment-content id="data">
    <ion-content color="light">
    </ion-content>
  </ion-segment-content>
</ion-segment-view>
  • 🎉1
tanner-reits commented

@Hesesses Thanks for the issue! Definitely a small oversight on my part during the implementation. Will get this fixed!

  • ❤️2
tanner-reits commented

@Hesesses Do you have a repro or possibly just a snippet of your code/CSS? I haven't been able to reproduce the behavior in the browser or a capacitor app.

Hesesses commented

I havent played this anymore after the issue created but i think the problem is when the content height is more than 100vh.

view:

<div class="ion-page" #pageElem>
  <ion-header class="ion-no-border">
    <ion-toolbar>
      ...
    </ion-toolbar>
  </ion-header>
  <ion-content [fullscreen]="true">
    <ion-header collapse="condense">
      <ion-toolbar>
        ....
      </ion-toolbar>
    </ion-header>
    <div class="ion-padding py-0 bg-secondary-600 sticky top-[-1px] z-50">
      <pd-tabs [buttons]="tabs" [value]="currentTab" (onChange)="onTabChange($event)"></pd-tabs>
    </div>
    
    <ion-segment-view>
      <ion-segment-content id="general">
        <app-league-general-tab [league]="league"></app-league-general-tab>
      </ion-segment-content>
      <ion-segment-content id="categories">
        <app-league-categories-tab [league]="league"></app-league-categories-tab>
      </ion-segment-content>
      <ion-segment-content id="information">
        <app-league-information-tab [league]="league"></app-league-information-tab>

      </ion-segment-content>
    </ion-segment-view>
  </ion-content>

</div>

my pd-tabs component:

<ion-segment mode="md" [value]="value" (ionChange)="onChange.emit($event)" [scrollable]="true">
  <ion-segment-button [value]="" content-id="general" style="margin-right:0px"></ion-segment-button>
  @for (button of buttons; track button.label) {
    <ion-segment-button [value]="button.value" [contentId]="button.value">
      <ion-label>
        {{ button.label }}
        </ion-label>
    </ion-segment-button>
  }
</ion-segment>

league-information-tab

<div class="ion-padding" innerHtml="{{ 'LEAGUE.TABS.INFORMATION.INFO' | translate }}">
  
</div>
tanner-reits commented

@Hesesses Sorry for the delay again, was out for the Holiday last week. I was able to reproduce the behavior when setting a height > 100vh on the ion-segment-content instances. However, I noticed this isn't an issue if you set the height on the ion-segment-view element instead, which feels like the more correct approach here to ensure that each child (i.e. the segment content) gets the same height when swiping between them.

Any reason this approach wouldn't work for you?

Hesesses commented

I tried to add height for ion-segment-view but it didnt change anything... For me the only way to fix this is to use <ion-content> as @moberwasserlechner suggested