No Tab Scroll for Mobile/Overflow on desktop (smaller width)

[jmacweb]

When using the Tab functionality, and having many tabs, the scroll functionality and arrows are missing when the body is thinner than the tabs width, overflow occurs. We are unable to get to the tabs that are not visible to the right. When clicking the right tab, it doesn't move left like the demos. Please help.

https://material.io/components/tabs/#

It appears you are using different unsupported css ( -webkit-overflow-scrolling: touch ) but this only works in Safari. Please use the original functionality built in Material to fix this.

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

Non-standard This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The -webkit-overflow-scrolling CSS property controls whether or not touch devices use momentum-based scrolling for a given element.

[americanslon]

@SamProf Could we get an update/opinion/acknowledgment on this? This is major in our mobile first modern world.

@jmacweb Did you find some work around in the mean time?

[jmacweb]

I did not try a work around at this time... also found another issue when adding an onClick function/code to the tabs. It works on the first click to run and display content but failed when clicking back to a previously clicked/exposed tab.

I can post the details when back to the computer.

Thanks,

Justin Morris

Sent from Outlook for Androidhttps://aka.ms/ghei36

---

From: americanslon notifications@github.com Sent: Monday, February 3, 2020 3:57:23 PM To: SamProf/MatBlazor MatBlazor@noreply.github.com Cc: Justin Morris jmorris@jmacweb.com; Mention mention@noreply.github.com Subject: Re: [SamProf/MatBlazor] No Tab Scroll for Mobile/Overflow on desktop (smaller width) (#379)

@SamProfhttps://github.com/SamProf Could we get an update/opinion/acknowledgment on this? This is major in our mobile first modern world.

@jmacwebhttps://github.com/jmacweb Did you find some work around in the mean time?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/SamProf/MatBlazor/issues/379?email_source=notifications&email_token=ACJCTAWXGSTOSLJGDTFFWBDRBCHMHA5CNFSM4KCWS452YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKVRRTI#issuecomment-581638349, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ACJCTAVAWNA7RYMJVDZ76JDRBCHMHANCNFSM4KCWS45Q.

[sebestyn168]

A workaround has been suggested in issue #193 It puts tabs on multiple lines, I'm aware it's not ideal but it works for me.

[radutomy]

I am looking for a solution for this as well. #193 works, but it's not ideal at all.