bug: Swipeable Segments - vertical scrolling should be disabled

[Hesesses]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

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]

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>

[tanner-reits]

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

[tanner-reits]

@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]

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]

@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]

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

[tanner-reits]

@Hesesses I'm not seeing the multi-scroll behavior when setting height on the ion-segment-view (i've tried with the ion-segment in the ion-content as well as in the header). Can you create either a StackBlitz or repro repo showing the issue?

[Hesesses]

Is it possible for you to give example how its working for you? I have tried to set height on ion-segment-view (100%, 100vh and different pixel variations) without success

[tanner-reits]

@Hesesses A simple use case where you can see it is the Ionic docs Stackblitz example setting the height to 200vh. This obviously doesn't account for the specifics of your project, but I used the snippets of the code you provided (as best I could without complete reproduction) and didn't have an issue. That can be found here.

[Hesesses]

Hi,

https://stackblitz.com/edit/angular-dfqmtnwj-kbpvrxjo?file=src%2Fapp%2Fexample.component.html,src%2Fapp%2Fexample.component.css,src%2Fapp%2Ftabs%2Ftabs.component.ts,src%2Fapp%2Ftabs%2Ftabs.component.html,src%2Fapp%2Fexample.component.ts,src%2Fapp%2Fcontent%2Fcontent.component.html,src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fapp.component.css

Edit.

I now started to play around with height: 200vh, and if you change this to something smaller than the actual content height, then you can scroll vertically and horizontally at the same time.

https://stackblitz.com/edit/angular-dfqmtnwj-nhxstsps?file=src%2Fapp%2Fexample.component.html,src%2Fapp%2Fexample.component.css,src%2Fapp%2Ftabs%2Ftabs.component.ts,src%2Fapp%2Ftabs%2Ftabs.component.html,src%2Fapp%2Fexample.component.ts,src%2Fapp%2Fcontent%2Fcontent.component.html,src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fapp.component.css

In my opinion this should work without setting specific height