-
-
Notifications
You must be signed in to change notification settings - Fork 6.9k
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] App Bar (v-toolbar) Height Adjusts from 56 to 48 to 64 dp #3990
Comments
I'd like to suggest that this issue isn't fixed. At least not on desktop at moderate screen sizes. I've updated my codepen to use v.1.2.0 stable. Here's my explanation revisited: Steps to reproduceResize the browser window horizontally. With browser window height of 804px, note that the toolbar height is 56px < 805px wide, 64px > 960px wide, and 48px in-between. Expected BehaviorThe "mobile landscape mode" of 48px for toolbar height shouldn't trigger at these browser window sizes. Screen widths on large-ish phones screens (like iPhone 8 Plus or Pixel 2 XL) are in the 414px range, so in landscape mode would have that as a height. I would suggest preventing mobile landscape mode unless the screen height is less than 450px to 500px or so. That way, on tablets and desktop, it doesn't get used, even in moderate browser window sizes. Actual BehaviorSee Steps to Reproduce. Reproduction Linkhttps://codepen.io/185driver/pen/wEzoNm (updated to v1.2.0 stable) Additional Comments:The attached screenshot is from my actual v1.2.0 app. Apologies for the file size; I wanted it to display smoothly. Note the screen size numbers to the left of the dev tools window and the changing toolbar height at various widths. Note too that the browser window is 804px high, not a height that should really be triggering mobile landscape mode in the toolbar. |
|
maybe orientation could be added to the breakpoint? |
Reproduction using nuxt I think this is the same issue? |
Orientation is no longer changes toolbar height (based upon md2 spec) and now is based off of breakpoints. If you have any additional questions, please reach out to us in our Discord community. |
Versions and Environment
Vuetify: 1.0.17
Vue: 2.5.16
Browsers: Chrome 67.0.3396.30
OS: Windows 10
Steps to reproduce
Open Codepen on the desktop, resize the browser window width, and note:
Expected Behavior
Google seems to intend that the app bar height metrics are either 56dp or 64dp, except for landscape mode on mobile, where it is supposed to be 48dp.
Actual Behavior
At browser window widths of 843px to 959px on desktop, the v-toolbar height is 48dp instead of 64dp.
Reproduction Link
https://codepen.io/185driver/pen/YLxmRy
Other comments
It seems odd to see browser window widths on the desktop that display the v-toolbar at 48dp high, especially in-between 56dp and 64dp heights.
The text was updated successfully, but these errors were encountered: