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] Tab highlights do not stay in sync with tab titles #4733

jlynde opened this issue Jul 27, 2018 · 11 comments

[Bug Report] Tab highlights do not stay in sync with tab titles #4733

jlynde opened this issue Jul 27, 2018 · 11 comments
C: VTabs VTabs T: bug Functionality that does not work as intended/expected


Copy link

jlynde commented Jul 27, 2018

Versions and Environment

Vuetify: 1.1.8
Vue: 2.5.16
Browsers: Chrome 67.0.3396.99
OS: Windows 7

Steps to reproduce

Instructions are provided in the reproduction link above as well. This example also uses vue-splitpane 1.0.2.

  1. Make this window very wide so you see space around the tabs
  2. Move the slider to various positions and note how the tab highlight (underline) does NOT stay in sync with the tab title
  3. Even when the slider is released the highlight remains in the wrong position until a different tab is selected
  4. Interesting to note that resizing the window actually does (after some short time) cause the highlight to move into the correct position

Expected Behavior

I expected the tab highlights to move and stay in sync with the tab titles as the slider was moved. At the very least, it should move into position after a short time like when the window is resized.

Actual Behavior

The highlights are not staying in sync and are not moved into position at all until a different tab is selected.

Reproduction Link

@KaelWD KaelWD added the wontfix The issue is expected and will not be fixed label Jul 27, 2018
Copy link

KaelWD commented Jul 27, 2018

We may add some sort of resize observer eventually, but currently tabs only listen for window resize events. As a workaround you can call the onResize() method via a ref.

Copy link

nickgr6 commented Apr 24, 2019

My issue #7061 was closed as duplicate of this issue.
This issue is closes as 'Wont fix'. It seems however that this is actually a bug, that should be resolved. Can this issue be reopened? I am willing to make a fix for this in Vuetify myself, if that helps?

Copy link

I am having a similar issue in an Electron app. While the tab component is loading I can see an empty tab for a second. Then when the tab text is rendered and the width shrinks by a few pixels, the tab highlight stays wider than the Tab item itself. It gets auto fixed on resize though.


This comment has been minimized.

jbl2024 added a commit to jbl2024/latelier that referenced this issue May 24, 2020
jbl2024 added a commit to jbl2024/latelier that referenced this issue May 25, 2020
* New UI Components (Desktop Topbar, Navigation drawer for mobile only)

* Removed KanbanLink from ProjectTitle, Fixed attachment route in ProjectMenu

* Search input can be toggled, breakpoints fixes

* removed useless method in TopBar

* Fix prevent search blur and semicolon for lint

* Fixes task display on organization dashboard + Fixed project with long title + Added a Wrapper component for two sides content

* Fix ShowTaskDetail display + Truncate organization title

* Navigation Drawer used for task tabs list instead of ContainerWrapper

* currentUser in main store + added a fullpage prop for emptystate + Removed topbar on auth page

* Moved vuex store project and filters to dedicated modules, Background mixin for backgrounds component methods

* eslint fixes

* Fixed currentProjectId store state calls

* Topbar Layout + ProjectSelector component + Tiny UI improvements + currentProject subscription in App

* Linting in store

* Fix currentProject from store in ProjectInfo

* Removed temporary attribute

* fixed currentProject not updated in projectInfo

* Change primary color to black

* Fixed typo/bug with project timeline

* Changing subscription directly in store

* meteor..project brought back in project related components + sub used to update store.currentProject object

* Reverted wording: Documents to Attachments

* Fixed eslint bug (not finding existing lint errors) by specifying js and vue files

* Fix linting errors

* Add overlap to notification badge + and user.hasAvatar added to main vuex store

* Fixing selectTask and showTaskDetail not working anymore by removing router-view keying with route path

* Fixed clone task to another project

* Removed tab transition in dashboardtasks side panel and fixed project settings not working

* Using currentProject in topbar project components + linting

* Fixed project tracking in topbar + Fixed projectId when project is null in projectMenu + generic component for editable text + moved edit project name in project general settings

* Fixed bug when project is still loaded in topbar in non related project page

* Fixed bug with currentProject and currentProjectId sync

* Linting

* Drawer to app for proper scroll

* Wording: Dashboard to Activity + Project History in dashboard task tab drawer

* Fixed history pagination + 10 history items per page + Linting

* fixed refresh project-history when changing project

* TaskTabs on dashboard page

* Passing currentProject as prop for project menu in navdrawer + linting

* Project menu: add different color & radius

* Adding Organization store and menu  + Rounded radius menu on center

* Using currentProject color for top bar

* Merging ProjectMenu and OrganizationMenu into MainMenu + Fixing MainMenu usage in ProjectDetail in timeline

* Fix project publication when members is empty

* Fixing dashboard taks tabs not updating when switching projects or organization, linting

* Fix click event firing after dragging on desktop

Fallback method fires the click event after a drag event.
Because of this behavior, the dragged task is automatically selected
which is weird.
Same problem when moving list items.

So fallback method is only forced on mobile devices
(where regular drag n drop does not work)

* Add missing EOL

* Pleasing linter

* Re-added SearchBar + linting

* Removed Projects.vue and ProjectsPage.vue. Added Organization Dashboard link to main menu

* Set focus programmatically when search is enabled + linting

* Revert drawer width to 360 for avoiding tabs arrows + Removed seemingly unused resize callback and css styles from the previous layout

* Fixed Escape key should close Search

* Fixed a bug where rightdrawer could open on resizing

* Fixed a bug where TaskDetail wasnt suppose to close when clicking inside drawer

* fix for safari

all parents must have height defined for height:100% to work

* Fix project activity background

* minor taskdetail UI improvements. + onlyIcons props in mainmen for hiding tabs text @todo: need to control TaskDetail content scrollbar behaviors

* Fix weid search input in project selector

* evert drawer width to 360 for avoiding tabs arrows on dashboard too

* Fixed toggling of rightDrawer with taskDetail and cosmetics changes in taskproperties

* Add offset on badges

* Fixed cosmetics for  completeAt field

* Sticky Tabs added back due to popular demand (and weird display)

* Fix sticky tabs & add color accent on sliders

* Revert task detail display

- title on top without number
- no duplicate title
- less dividers
- accentuated fonts & colors for dates
- description is now on properties tab

* Remove task completed info in task properties tab

* Let's try another font: Inter UI

* Linter + fix access to potential null object

* Fix height

100% not 100vh !

* Fix click outside

event.path is webkit only, on ff it is compostedPath.

on IE it does not exist but who cares?

* Remove click-outside handler

too much edge cases to handle

* Padding in edit task name

* Remove ref to click-outside in task drawer

* Do not call router twice

When clicking on org, @click & :to were doing the same thing

* Remove useless subscription

Organization is fetched above

* Home go back organization if project is tied to one

* Disable linter warning

Maybe we should work on this

* Revert "Removed Projects.vue and ProjectsPage.vue. Added Organization Dashboard link to main menu"

This reverts commit 5f95b6a.

* Revert organization menu

* Subscribe to labels in project publish composite

* Fix toolbar on xs breakpoint

* Add trashcan on project toolbar

* Edit label on select label widget

* Top bar: text color is based on  background color

dark text is applied if needed

* Fix organization management in dashboard desktop

* Display tasks on homepage

* Added media-query SCSS mixin using vuetify breakpoints vars

* First setup for MainMenu as Mobile Bottom Navigation with contextual items + Refactoring Topbar for mobile + Vuex store for reusable colors - @todo : Mobile Search Bar, and MainMenu Dashboard Items

* Fix home icon on light background

* Fix email display on label filter

when user comes from keyckloak, email is stored in elsewhere

* Fixed Menus Items display logic + fix resetColor when project has no color

* Removed reset in store and let App handle dispatch color change

* Fix v-col directive

* Added tasks menu item in bottom navigation

* Remove bloat in Dashboard Mobile + added margin to dashboard toolbar

* Fixed emptyState component + minor changes in projectList component

* Removed cheap tabs transition in SearchResults + Linting

* Removed useless hasBackground method

* Add organization switching + refactoring the project selector as content selector + merging titles component @todo : Handle FOUCs

* Fix DashboardMobile to make it work with switchOrganization

* Little fix for FOUCs on dashboard desktop and awful linting

* Fix tab color & please linter

* Added count for project and organization in ContentSelector and tabs accent sliders

* Handling navigation colors

* Fixed dark prop for bottomNav on mobile

* Fixed projectstimeline without project display

* Handling better route switching for organization pages via ContentSelector

* Fix timeline redraw when switching organization

* Preselect organization tab on organization page in content-selector

* Add sticky-tabs on tabs header when scrolling

* Removed v-hover and mini-variant for drawer not needed anymore with mobile layout

* Moved projectGroups on top of navDrawer probably will be deleted in future

* Fixed mainmenu menu bug by resetting currentOrganization and currentProjct when switching project/organization + tagging project related routes

* Refreshing correct projectweather when projectId changes

* Fix lint error & warnings

* Reset selected report when project is changed

* Fix lint error

* Fix top menu display in project

When navigating from organization, top menu was not set to project

* Home button redirect to organization page if relevant

Redirect to org page when project.organizationId is not null.

Note: this.organizationId is not refreshed when
reloading page. This is clearly a bug but quite
minor so we do not bother yet because the
only relevant attribute here is project.organizationId

* Display burger menu on sm & down

because the top menu is not displayed at sm & down too

* TaskDetails drawer: force z-index above bottom bar

on mobile/tablet, when drawer is temp the
bottom bar is hidding the bottom zone of
task details

* Fix task detail fill height on android/chrome


for details

* Project history: replace list item with timeline

* Improve project performance

Lazy load tasks

* Right drawer is fixed

Revert from previous behavior to improve performances

* Lazy loading on dashboard project list

* Remove wrong directive

* Lazy loading on dashboard project list (mobile)

* Improve task detail display performance

The computed property "selected" is very slow
and replacing it with a watcher on selectedTask
seems to have better performance

* Add space between line labels

* Add shortcuts

- "l" to add label
- "/" to display search menu
- "p" to display content selector (project/org)

* Select label: do not show search input unless "s" is pressed

* Remove wrong handler

* Allow text selection when editing list

SortableJS must be disabled to allow
text selection

* Better looking attachments page

* Improve project settings layout

* Fix format

* Fix labels display in settings

* Fix center tab issue

see vuetifyjs/vuetify#4733

* Fix sticky on webkit

* Cleaning old and seemingly unnecessary styles and props

* Brought back temporary drawer without overlay for hiding it when clicking outside

* Fixed closing when switching tasks in detail but still need to be able to close by clicking outside

* Added project groups as an autocomplete and removed it from navdrawer + toolbar gets its own component

* No category lang + margin on project group chip

* Fixed translate typo

* User prop not used in DashboardTaskList

* Avoid resize and scrollbar overlapping

* Remove useless divider

Co-authored-by: Mahëd Benzerga <>
Copy link

glen-84 commented Jun 3, 2020


Can you please reopen this issue?

Here is another example:

(click the first button to change the item data, and notice how the slider is not adjusted)

Copy link

broom9 commented Oct 8, 2020

We are also seeing this issue. Using Vuetify 2.3.7 but have been seeing this issue for many versions.

Copy link

We are having a similar issue when we are changing the locale of our application, tabs are translated correctly, but the width of the tab highlight doesn't update.

I have fixed the issue by emitting a fake resize event on the window object. This may cause unnecessary updates, but it's working for us.

// TODO: dirty workaround
// trigger resize whenever tab title gets update (ie. by changing the locale)
window.dispatchEvent(new Event("resize"));

Copy link

We have same problem like @janvorisek. If you give ref attribute to v-tabs, you can call onResize method of v-tabs like below.

We call this method after locale changed or resource loaded and it works. I hope that it helps to someone :) If not working directly you can try this.$nextTick method.

<v-tabs ref="tabs">

this.$refs.tabs && this.$refs.tabs.onResize();

Copy link

vincent-olivert-riera commented Dec 8, 2020

My issue #7061 was closed as duplicate of this issue.
This issue is closes as 'Wont fix'. It seems however that this is actually a bug, that should be resolved. Can this issue be reopened? I am willing to make a fix for this in Vuetify myself, if that helps?

⬆️ @johnleider

This is a very minimal example where the issue is reproduced:

Copy link

Hi @vincent-olivert-riera. I shared the solution on my last post. You can also check the codepen page via this link.

Copy link

vincent-olivert-riera commented Dec 12, 2020

Hi @vincent-olivert-riera. I shared the solution on my last post. You can also check the codepen page via this link.

I know, I have read the whole post and I'm currently using that solution workaround. The bug is still there and it would be nice to have it fixed.

@KaelWD KaelWD reopened this Oct 12, 2021
@KaelWD KaelWD added C: VTabs VTabs T: bug Functionality that does not work as intended/expected and removed wontfix The issue is expected and will not be fixed labels Oct 12, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
C: VTabs VTabs T: bug Functionality that does not work as intended/expected
None yet

No branches or pull requests

9 participants