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] Inset footer is causing some rendering issues with navigation drawer #4727

Closed
bRUCE-2 opened this issue Jul 26, 2018 · 7 comments
Labels
duplicate The issue has already been reported T: bug Functionality that does not work as intended/expected

Comments

@bRUCE-2
Copy link

bRUCE-2 commented Jul 26, 2018

Versions and Environment

Vuetify: 1.1.8
Last working version: 1.1.6
Vue: 2.5.16
Browsers: Chrome 67.0.3396.99
OS: Windows 7

Steps to reproduce

  1. Build a navigation drawer (mini set to true in my case)
  2. Add page content. The page content should be large enough to cause vertical scrolling
  3. Scroll the page up and down and observe the rendering of the navigation drawer

Expected Behavior

Navigation should not cease to render

Actual Behavior

  1. Navigation drawer ceases to render.
  2. It appears as if the navigation drawer is translucent and you can see the footer behind the drawer.

Reproduction Link

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

@johnleider johnleider added T: bug Functionality that does not work as intended/expected Epic and removed Epic labels Jul 27, 2018
@scp-nm
Copy link

scp-nm commented Jul 27, 2018

Hi,
I'm getting the same, and this is easily reproducible on the Layout Sandbox - simply change footer to 'inset':
https://vuetifyjs.com/en/examples/layouts/sandbox

@steinwachs
Copy link

steinwachs commented Aug 2, 2018

I can confirm both the issue and the last working version (1.1.6). The issue is present both in 1.1.9 and 1.2.0-beta.0 as well.

The issue seems to be that the navigation drawer max-height is now calculated differently (see screenshot).
max-height-navdrawer

@KaelWD
Copy link
Member

KaelWD commented Aug 2, 2018

This was caused by cc4959f and 517e64a, we need a better system to fix all these issues.

@colegasgroupdev
Copy link

Does anyone have a work around for this?

@steinwachs
Copy link

One workaround option - if you do not need the drawer to be permanent - is to use the temporary prop for the moment:

<v-navigation-drawer
  app
  temporary
  ...

Alternatively, just use the style prop to override the incorrectly calculated max-height:

<v-navigation-drawer
  app
  style="max-height: 100%"
  ...

@KaelWD
Copy link
Member

KaelWD commented Sep 5, 2018

Duplicate of #4686

@KaelWD KaelWD marked this as a duplicate of #4686 Sep 5, 2018
@KaelWD KaelWD closed this as completed Sep 5, 2018
@KaelWD KaelWD added the duplicate The issue has already been reported label Sep 5, 2018
@EstefanTT
Copy link

EstefanTT commented Mar 4, 2019

There is a fun work around ...

You store in VueX store the value True/False of the drawer and change its state when you open and close it.
Then, you define a margin for the content of the Footer only displayed when the value of the Drawer is "true".

@lock lock bot locked as resolved and limited conversation to collaborators Mar 10, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
duplicate The issue has already been reported T: bug Functionality that does not work as intended/expected
Projects
None yet
Development

No branches or pull requests

7 participants