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-Content is not working properly with a Permanent Navigation Drawer #2493

Closed
4eveRS opened this issue Nov 13, 2017 · 9 comments
Assignees
Labels
T: bug Functionality that does not work as intended/expected

Comments

@4eveRS
Copy link

4eveRS commented Nov 13, 2017

Versions and Environment

Vuetify: 0.17.0
Vue: 2.5.3
Browsers: Chrome 62.0.3202.89
OS: Mac OS 10.12.6

Steps to reproduce

Try to resize (reduce the size) the window until it automatically resizes the content

Expected Behavior

v-content should always have the padding-left equals the size of the navigation drawer if it's defined as permanent.

Actual Behavior

v-content resizes and hide it's content (lose the padding-left) below the navigation-drawer (set to permanent)

Reproduction Link

https://codepen.io/4eveRS/pen/Xzgzbw

Other comments

I think this all this automatically resize option should be optional and defined at the v-app component.

@johnleider
Copy link
Member

After checking the notes I see that this change did not make the list. This is something that the team discussed recently and we decided to have all drawers be treated the same in regards to mobile. Permanent was causing too many issues and you can now achieve the same behavior by just adding disable-resize-watcher to v-navigation-drawer.

Sorry for the inconvenience.

@4eveRS
Copy link
Author

4eveRS commented Nov 14, 2017

Sorry, but I think the problem persists even with disable-resize-watcher...

It's not the permanent drawer that I'm worried about, but the v-content content that doesn't retain the padding-left when the window is resized.

@johnleider
Copy link
Member

Tracking

@chirag97
Copy link

image

Why my projects using started behaving in a wrong way. all layout is disturbed and content in main is going outside.
Did anyone made any changes to repo by mistake?

@KaelWD
Copy link
Member

KaelWD commented Nov 14, 2017

@chirag97 That isn't related to this issue at all, please create a codepen with reproduction and post it in discord. More than likely you haven't read the upgrade guide in the release notes.

@Zeph33
Copy link
Contributor

Zeph33 commented Nov 14, 2017

App toolbar, content and footer ignore stateless mode of navigation drawer
https://codepen.io/zeph33/pen/KyqOwO
Resize and full toolbar, content and footer not visible

@4eveRS
Copy link
Author

4eveRS commented Nov 14, 2017

I think that the change to make the content resize is very welcome in most cases, but I also think that the framework as it self, should embrace all kind of app/websites cases as possible.

So in my opinion, this resize funcionality (toolbar, navbar and v-content) should be setted as a prop in v-app which wraps all the contents.

It can be enabled by default, but also, could be disabled if the app or website doesn't benefit from this functionality.

Something to Vuetify team to analyze and verify the possibility of adding this.

johnleider added a commit that referenced this issue Nov 15, 2017
…ent (#2495)

* fix(v-navigation-drawer): update drawer states reactivity with permanent

fixes #2493

* Create failing test cases

* simplfied logic, fixed tests, added one

* remove overlay when being resized from mobile to desktop and active

* run tryOverlay when temporary toggles

* test: use expect().toBeTruthy()

* Remove booting from drawer

 - Prevents the initial animation on non-ssr pages
 - Uses a ref hack to set the correct styles on content elements - see
   vuejs/vue#7063
@KaelWD
Copy link
Member

KaelWD commented Nov 15, 2017

@4eveRS They won't resize unless they have the app prop.

@lock
Copy link

lock bot commented Apr 15, 2019

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord

@lock lock bot locked as resolved and limited conversation to collaborators Apr 15, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
T: bug Functionality that does not work as intended/expected
Projects
None yet
Development

No branches or pull requests

5 participants