Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug Report] v-tabs bar missing offset on medium(?) viewports to indicate that scrolling is possible #6932

Closed
Bbansjkl opened this issue Apr 5, 2019 · 3 comments
Assignees
Labels
C: VTabs T: bug Functionality that does not work as intended/expected T: enhancement Functionality that enhances existing features
Milestone

Comments

@Bbansjkl
Copy link

Bbansjkl commented Apr 5, 2019

Versions and Environment

Vuetify: 1.5.9
Vue: 2.6.10
Browsers: Firefox 66.0
OS: Windows 7

Steps to reproduce

  1. Create a v-tabs component with more tabs than fit into it
  2. Lower viewport size to <=1263px, e.g. by resizing the window or rendering within an iframe

Expected Behavior

Offset is shown on the left-hand size

Actual Behavior

Offset is not displayed

Reproduction Link

https://codepen.io/anon/pen/jRrbYy

Other comments

Also happens in 2.0.0-alpha.12

Google Material specs (ctrl+f -> "Placement"->scroll down) say that "Do: On mobile and desktop, offset the first tab on the left to signal that tabs are scrollable." This is not the case on devices with a medium(?) viewport.
On larger viewports this is kinda supported, since the left arrow is not displayed while there are no items on the left, but smaller viewports don't show arrows unless the "show-arrows"-prop is provided.

Kinda off-topic: On Desktop the arrows vanish too, which makes scrolling hard on smaller viewports (e.g. when the page is rendered within an iframe on a small resolution, or when the browser window is not maximized). The only way to scroll then is to repeatedly click the last item. This was first discussed in #1789, which was closed in favor of #2530, resulting in the PR #2838, which supposedly made arrows show up on all viewport sizes - was this removed again or is the arrows vanishing on viewports with less than 1264px width a bug and should be covered in a new issue?

@johnleider johnleider added the T: enhancement Functionality that enhances existing features label Apr 6, 2019
@johnleider
Copy link
Member

The last part should be in a new issue please/ty :)

@johnleider johnleider added the T: bug Functionality that does not work as intended/expected label Apr 6, 2019
@johnleider johnleider added this to the v2.0.x milestone Jul 18, 2019
@johnleider johnleider self-assigned this Jul 27, 2019
@azollai

This comment has been minimized.

bhaskar-nair2 added a commit to bhaskar-nair2/vuetify that referenced this issue Oct 19, 2020
Added display classes to hide the arrow placeholder which created a blank space on the VTabs slider.

fix vuetifyjs#6932
bhaskar-nair2 added a commit to bhaskar-nair2/vuetify that referenced this issue Oct 19, 2020
Added display classes to hide the arrow placeholder which created a blank space in the VTabs slider
on mobile devices.

fix vuetifyjs#6932
@johnleider
Copy link
Member

@azollai We kindly ask users to not comment on closed/resolved issues. If you believe that this issue has not been correctly resolved, please create a new issue showing the regression.

If you have any additional questions, please reach out to us in our Discord community.

@vuetifyjs vuetifyjs locked as resolved and limited conversation to collaborators Oct 20, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
C: VTabs T: bug Functionality that does not work as intended/expected T: enhancement Functionality that enhances existing features
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants