Vuetify: Feature Request: Tabs Pagination - Handling between Mobile and 1280px viewports based on touch support

[SomethingNew71]

Feature Request Details

Display pagination based on touch support instead of checking screen width.

What will it allow you to do that you can't do today?

Better handling of pagination between full desktop(1280px) and mobile viewports. Currently, tab items are cut off if you are in a smaller desktop viewport that does not meet the mobile requirements.

What potential bugs and edge cases does it help to avoid?

This will prevent users from being unable to access tab items on middle-sized desktop viewports.

What should happen?

Potentially show pagination arrows if there is no touch support and disable them if there is touch support.

What is actually happening?

Users are left unable to access some tab items on a desktop if they are below 1280px and above a mobile viewport.

Reproduction Link

Pagination section of https://vuetifyjs.com/components/tabs

[jacekkarczmarczyk]

This approach for detecting touch/mouse https://medium.com/@david.gilbertson/the-only-way-to-detect-touch-with-javascript-7791a3346685
I'm only not sure what and when should be responsible for this detection

[KaelWD]

The PR wasn't done yet, reopening.

[BennyAlex]

I dont understand why not always show the arrows if the tabs overflowing? If you are on mobile and have arrows you can see more easily that there are tabs which aren't visible at the moment. Sometimes I'm on my phone and I can't see that there is hidden content which I can scroll to, because there aren't any identicators...

[KaelWD]

@BennyAlex Blame google

[SomethingNew71]

Shouldn't improving on the material specs by google be something inside the scope of the project? Just cause google said it doesn't mean it should be the word of god imo. 😄

[johnleider]

You could also argue the inverse, when people come to a Material project, they expect everything to match spec.

For the time being, it is much easier to match spec, while it technically does happen in some places of the framework, improving on it is a large effort reserved for after 1.0 release.

[BennyAlex]

@johnleider
an attribute for v-tabs 'always-show-arrows' would be really nice

[johnleider]

@KaelWD are you still for this change?

[KaelWD]

This isn't going to be possible due to how difficult it is to accurately detect touch support. The best way to resolve this is to redesign the tabs to match materials spec more accurately, and maybe allow tabs to be scrolled by dragging the mouse as well as touch.

[KaelWD]

Closed in favour of #2530

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord