Hi,
How can I disable swipe to switch tabs?
Currently I have google map on one of the tabs and while scrolling it triggers swipe all the time and switch to another tab.
Thank you
Hi!
Yes, under client actions, OutSystems UI Mobile (Silk UI Mobile if you are in OutSystems 10) you can find a folder for Tabs with an action to disable swipe.
Hope it solves the issue :)
Hi
When I try to use the DisableTabsSwipe action I get the error "Cannot read property 'querySelector' of null" and tab swipe is still enabled. Do you know what could be causing this?
Zachary wrote:
What event/actions is triggering the DisableTabsSwipe? To do it right after a screen load, use the OnReady event to call the action.
Right now it is not possible to turn off the swipe actions, bit it is identified and will be delivered in the future.
As a workaround, I'd suggest to create your own tabs using a ButtonGroup inside the Header content area, it will have the same UI as the Tabs do.
Was there any update on this. We have the same issue when using google maps.
That does it, thanks! I was calling it in OnInitialise.
Hi Zachary,
You can override the CSS class in your project.
SyntaxEditor Code Snippet
.tabs-content{ pointer-events:none !important; }
It's work for me. Hope this helps.Thanks
Viraj Kataria wrote:
Hi Viraj,
Don't take me wrong, but "!important" is considered bad practice in CSS. Later this can cause problems with other part or component of the app.
I understand that this trick works, but it's not the best approach IMHO.
Best regards,
Ricardo
As Dinis Carvalho said, you should use the DisableTabsSwipe action. However, it should be used inside the OnReady, passing the widget ID of the tab to it. So her swipe will be disabled.I hope to help,Bernardo
If the error "Cannot read property 'querySelector' of null" persists, you can add "no-swipe" as an extended Class.
Just to add my 2cents to this topic.
When using conditions inside of tabs, for example to only show a specific tab header and content if the user has access to that content, regardless of the IF condition being inside of the tab TabsHeaderItem and TabContentItem, or if the tab elements (TabsHeaderItem, TabContentItem) are inside of the IF statement, the TabsDisableSwipe action applied on the onReady action does not prevent users from swiping on the tabs with the conditional.
A more practical example is the case of a mobile app when there is a Detail tab that is always visible and a Users tab that is only visible to administrators.
On the Detail tab the user is not able to use the swipe but on the Users tab an administrator is able to swipe back to the Detail tab.
The only way I was able to fix this was to create a custom class that I applied to the Tabs pattern and force the css pointer events of .tab-content to now allow pointer events.
.no-swipe div.tab-content {
pointer-events: none;
}
On top of the css hack mentioned above I noticed that by applying pointer-events: none; also prevents users from interacting with the content, such as dropdowns, inputs, textareas, buttons and so on, along with preventing the swipe action to happen.
to allow the user to interact with tab content you need to add another css rule to overwrite the parent rule like so:
.no-swipe div.tab-content .tabs-content-tab {
pointer-events: all;
the specificity of the rule is used to prevent having to apply !important in some cases.