ion-scroll inside tab doesn't work

[allanpoppe]

Hi.
I have a ion-scroll inside a tab page, as follows. This will create a list of tags, wich should be horizontal scrollable.

Tab page:

<ion-header class="tags-header">
	<ion-navbar>
		<ion-scroll class="tags-scroll" scrollX="true" scrollY="false">
			<tags class="name-tags" isObject="true" propTexto="nome" [itens]="(categoriasEventos | async)" [deletar]="false"></tags>
		</ion-scroll>
	</ion-navbar>
</ion-header>

<ion-content>
	...
</ion-content>

The drag event doesn't work. I can't scroll it.

tabs.html:

<ion-header>
	<ion-navbar color="primary">
		<div class="searchbar searchbar-ios searchbar-active search-tabs" (click)="abrirTelaPesquisa($event)">
			<div class="searchbar-input-container">
				<div class="searchbar-search-icon"></div>
				<input class="searchbar-input" style="text-align:center" placeholder="Pesquisar" type="text" autocomplete="off" autocorrect="off" spellcheck="false" disabled="true">
			</div>
		</div>

		<ion-buttons end>
			<button ion-button icon-only (click)="abrirPerfil()">
				<ion-thumbnail>
					<img class="perfil-thumbnail" src="{{(perfil | async)?.foto}}">
				</ion-thumbnail>
			</button>
		</ion-buttons>
	</ion-navbar>
</ion-header>

<ion-content class="tabs-content">
	<super-tabs tabsPlacement="bottom" toolbarBackground="primary" selectedTabIndex="1" toolbarColor="white" indicatorColor="white" badgeColor="danger">
		<super-tab [root]="menuRoot" title="" icon="menu"></super-tab>
		<super-tab [root]="feedRoot" title="{{superTabs.selectedTabIndex == 1 ? 'Feed' : ''}}" icon="ios-paper"></super-tab>
		<super-tab [root]="agendaRoot" title="{{superTabs.selectedTabIndex == 2 ? 'Eventos' : ''}}" icon="calendar"></super-tab>
		<super-tab [root]="faculdadeRoot" title="{{superTabs.selectedTabIndex == 3 ? 'Faculdade' : ''}}" icon="school"></super-tab>
		<super-tab [root]="disciplinasRoot" title="{{superTabs.selectedTabIndex == 4 ? 'Disciplinas' : ''}}" icon="bookmarks"></super-tab>
		<super-tab [root]="notificacoesRoot" title="" icon="notifications" badge="4" tabBadgeStyle="danger"></super-tab>
	</super-tabs>
</ion-content>

If this page is opened outside super-tabs, it work's fine. Even if I open inside a angular's tabs, it works fine.

Dependencies:

    cordova -v
    7.0.1

    "dependencies": {
        "@angular/animations": "5.0.3",
        "@angular/common": "5.0.3",
        "@angular/compiler": "5.0.3",
        "@angular/compiler-cli": "5.0.3",
        "@angular/core": "5.0.3",
        "@angular/forms": "5.0.3",
        "@angular/http": "5.0.3",
        "@angular/platform-browser": "5.0.3",
        "@angular/platform-browser-dynamic": "5.0.3",
        "@angular/platform-server": "5.0.3",
        "@angular/router": "5.0.3",
        "ionic2-super-tabs": "4.1.5",
        "rxjs": "5.5.2",
    },
    "devDependencies": {
        "@ionic/app-scripts": "3.1.2",
        "ionic": "3.19.0",
        "typescript": "2.6.1"
    }

[allanpoppe]

@ihadeed can you help me on this?

[lightyaer]

Use super-tabs 4.1.4 for now, 4.1.5 isn't working properly.

[allanpoppe]

Actually, the first version I tested this on was 4.1.0. The same problem. I upgraded to 4.1.5 in the hope this was fixed, with no lucky.

The problem with 4.1.5 is as missing scss in the build.

[lightyaer]

Ohh.. The missing SCSS, thats why the tabs seem dumb,but they dont even navigate, anyways downgrade to 4.1.4 and it'll all be working as it should, I can confirm.

[allanpoppe]

Scroll elements inside super-tab (as described above) are not working properly on 4.1.4. Just tested.

It's not just with this 'list of tags' I created. I also implemented ng2-pdf-viewer and the scroll feature doesn't work when it's inside a super-tab.

@ihadeed I appreciate a lot your work on this, but unfortunately if I can't use a scroll element inside a tab (that's not a ion-slider, ion-sliders works well), i can't use this plugin.

[eduardoRoth]

@allanpoppe :
As a quick fix, modify the file super-tabs-pan-gesture.js to comment this lines (of SuperTabsPanGesture.prototype._onMove function):

// stop anything else from capturing these events, to make sure the content doesn't slide
//ev.stopPropagation();
//ev.preventDefault();

And then, in your supertabs html add the attribute config as shown next:

<super-tabs [config]="{dragThreshold: '120'}">

*dragThreshold could be less, like 100 (pixels), but for me 120 works well for the ion-scroll to move without moving the tab.

After that, your ion-scroll should work for short swipes (user will know that element could be dragged) and if you swipe longer the tab will move as usual.

I'll make a branch to enable this change as a config attribute.

[eduardoRoth]

Pull Request #243

[hendra47]

thanks, @eduardoRoth this work for me

[eduardoRoth]

Don't mention it @hendra47.

@hendra47 , @allanpoppe

Checking further into the components, I found that Slides work without modification (I changed my list of ion-items inside of an ion-scroll to a Slides component with 4 slides per view and it worked flawlessly)

So, I assume Slides component have priority on the pan gesture over supertabs, I'm checking the code of Slides and ion-scroll to see if there's something different for the gesture event handler.

[ihadeed]

With @eduardoRoth 's PR merged, I'm guessing this will be fixed in the next release, tonight.