Cannot scroll horizontal Tabs inside Bottomsheet

[minhson95th]

i try scroll horizontal in title tabs but it's can not scroll

https://github.com/nativescript-community/ui-persistent-bottomsheet/assets/46039866/6b53ee32-f2c6-4051-b4f4-fa265c29eacc

Here is my code file .html

<ActionBar class="action-bar" id="actionBar" (loaded)="actionBarLoaded($event)">
    <NavigationButton visibility="hidden"></NavigationButton>
    <GridLayout columns="50, *">
        <Label class="action-bar-title" text="Home" colSpan="2"></Label>

        <Label class="fas" text="&#xf0c9;" (tap)="onDrawerButtonTap()"></Label>
    </GridLayout>
</ActionBar>

<BottomSheet #sheet [stepIndex]="stepIndex" (stepIndexChange)="onIndexChanged($event)" [steps]="[50, 320, 560]"
    scrollViewId="list" backdropColor="#88000000">
    <GridLayout backgroundColor="white" width="100%" height="100%">
        <Label verticalAlignment="top" text="This is the main content"></Label>
    </GridLayout>
    <GridLayout bottomSheet backgroundColor="yellow" rows="*" width="100%" height="100%">
        <MDTabs row="0" (selectedIndexChanged)="tabChanged($event.newIndex)">
            <MDTabStrip>
                <MDTabStripItem>
                    <Label text="Tab One"></Label>
                </MDTabStripItem>
                <MDTabStripItem>
                    <Label text="Tab Two"></Label>
                </MDTabStripItem>
                <MDTabStripItem>
                    <Label text="Tab Three"></Label>
                </MDTabStripItem>
                <MDTabStripItem>
                    <Label text="Tab Four"></Label>
                </MDTabStripItem>
                <MDTabStripItem>
                    <Label text="Tab Five"></Label>
                </MDTabStripItem>
            </MDTabStrip>

            <MDTabContentItem>
                <ListView [id]="id[0]" [items]="items1" class="list-group" backgroundColor="red" separatorColor="blue">
                    <ng-template let-item="item">
                        <GridLayout height="60">
                            <Label [text]="item.name" class="list-group-item" color="white"></Label>
                        </GridLayout>
                    </ng-template>
                </ListView>
            </MDTabContentItem>

            <MDTabContentItem>
                <ListView [id]="id[1]" [items]="items1" class="list-group" backgroundColor="red" separatorColor="blue">
                    <ng-template let-item="item">
                        <GridLayout height="60">
                            <Label [text]="item.name" class="list-group-item" color="white"></Label>
                        </GridLayout>
                    </ng-template>
                </ListView>
            </MDTabContentItem>

            <MDTabContentItem>
                <ListView [id]="id[2]" [items]="items1" class="list-group" backgroundColor="red" separatorColor="blue">
                    <ng-template let-item="item">
                        <GridLayout height="60">
                            <Label [text]="item.name" class="list-group-item" color="white"></Label>
                        </GridLayout>
                    </ng-template>
                </ListView>
            </MDTabContentItem>
            <MDTabContentItem>
                <ListView [id]="id[3]" [items]="items1" class="list-group" backgroundColor="red" separatorColor="blue">
                    <ng-template let-item="item">
                        <GridLayout height="60">
                            <Label [text]="item.name" class="list-group-item" color="white"></Label>
                        </GridLayout>
                    </ng-template>
                </ListView>
            </MDTabContentItem>
            <MDTabContentItem>
                <ListView [id]="id[4]" [items]="items1" class="list-group" backgroundColor="red" separatorColor="blue">
                    <ng-template let-item="item">
                        <GridLayout height="60">
                            <Label [text]="item.name" class="list-group-item" color="white"></Label>
                        </GridLayout>
                    </ng-template>
                </ListView>
            </MDTabContentItem>
        </MDTabs>

    </GridLayout>
</BottomSheet>

file .ts

export class HomeComponent implements OnInit {
  @ViewChild('sheet', { static: false }) sheet: BottomSheetComponent;
  id = ["id1", "id2", "id3", "id4", "id5"]
  items1 = [
    { index: 0, name: 'TURQUOISE', color: '#1abc9c' },
    { index: 1, name: 'EMERALD', color: '#2ecc71' },
    { index: 2, name: 'PETER RIVER', color: '#3498db' },
    { index: 3, name: 'AMETHYST', color: '#9b59b6' },
    { index: 4, name: 'WET ASPHALT', color: '#34495e' },
    { index: 5, name: 'GREEN SEA', color: '#16a085' },
    { index: 6, name: 'NEPHRITIS', color: '#27ae60' },
    { index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
    { index: 8, name: 'WISTERIA', color: '#8e44ad' },
    { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' },
    { index: 10, name: 'SUN FLOWER', color: '#f1c40f' },
    { index: 11, name: 'CARROT', color: '#e67e22' },
    { index: 12, name: 'ALIZARIN', color: '#e74c3c' },
    { index: 13, name: 'CLOUDS', color: '#ecf0f1' },
    { index: 14, name: 'CONCRETE', color: '#95a5a6' },
    { index: 15, name: 'ORANGE', color: '#f39c12' },
    { index: 16, name: 'PUMPKIN', color: '#d35400' },
    { index: 17, name: 'POMEGRANATE', color: '#c0392b' },
    { index: 18, name: 'SILVER', color: '#bdc3c7' },
    { index: 19, name: 'ASBESTOS', color: '#7f8c8d' }
  ];
  constructor(
  ) {

  }

  ngOnInit(): void {
    console.log("init");
    // Init your component properties here.
  }

  tabChanged(idx) {
    this.sheet.scrollViewId = this.id[idx]
  }

}

[farfromrefug]

@minhson95th you need to set pan gesture options. YOu have to test but something like this might work panGestureOptions={{ failOffsetXEnd: 20, minDist: 40 }}

[minhson95th]

@minhson95th you need to set pan gesture options. YOu have to test but something like this might work panGestureOptions={{ failOffsetXEnd: 20, minDist: 40 }}

set pan gesture options for which? can you explain more. Now i want can scroll sheet, scroll listview in sheet and scroll horizontal title tabs inside sheet. But only scroll sheet and scroll listview in sheet work because i have set scrollViewId with id in ListView

If i not use bottom sheet, i can scroll horizontal title tabs normally like video below

https://github.com/nativescript-community/ui-persistent-bottomsheet/assets/46039866/e31ab63c-fb51-45f2-acdb-6b4c1edc5fb2

[minhson95th]

panGestureOptions={{ failOffsetXEnd: 20, minDist: 40 }}

now i can scroll, thanks!