[Bug Report] VTabs misaligned with fixed-tabs property
See original GitHub issueEnvironment
Vuetify Version: 2.0.2 Last working version: 2.0.0 Vue Version: 2.6.10 Browsers: Firefox 68.0 OS: Mac OS 10.14
Steps to reproduce
- Create an application with tabs inside of an app-bar.
- Set the tabs to use
fixed-tabs
. - View the website on a mobile browser.
Expected Behavior
- The tab item should fill its container.
- The tabs should have equal padding on each horizontal side.
- The first tab should be aligned with the app bar’s left button.
- The tab item itself should be sized to fit the tab text.
- The slider should be aligned with the tab item.
Actual Behavior
- The first tab has a large margin and is no longer aligned with the app bar’s left button.
- The slider is misaligned with the text.
- The tab’s text exceeds the bounds of the ripple effect.
Reproduction Link
Issue Analytics
- State:
- Created 4 years ago
- Reactions:1
- Comments:6 (2 by maintainers)
Top Results From Across the Web
Tab control page caption alignment problem with fixed width ...
I have noticed that the page captions of a tab control in Access 2010 show a very peculiar alignment under these circumstances:.
Read more >Properties panel causing inconsistent tab group behaviour
The new Properties panel has a fixed width. When it's in a tab group with panels that don't have a fixed width (eg....
Read more >Terminator - Left align and slim tabs - Launchpad Bugs
I find it quite confusing when adding and removing tabs, as their position changes frequently. Is it possible to make the tab only...
Read more >"Misplaced alignment tab character &" error when citing a ...
title = "Health and Safety Report 2012",. and that it's a business for the bibliography style to decide whether to keep the original ......
Read more >737785 - Implement 'tab-size' (dropping the -moz- prefix)
Gecko currently supports `-moz-tab-size`. The `-moz-` prefix should be dropped when CSS3 Text reaches CR. This bug can be used to track that....
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
This is resolved as of the latest version.
If you have any additional questions, please reach out to us in our Discord community.
Workaround: https://codepen.io/johnjleider/pen/qemBjq