Vuetify: [Feature Request] Allow to use v-spacer inside v-navigation-drawer to make the elements "bottom-aligned"

[AlexSHoffman]

New Functionality

It would allow to move list elements (inside of a drawer) to the bottom & to scroll the whole list on y-overflow:

• See GIF (it's 60mb, let it load): https://imgur.com/a/NDbN3
• Codepen: https://codepen.io/anon/pen/zWGwOe?editors=1000

Improvements

More use cases (for example: Windows 10 UWP style drawer).
Right now, v-spacer doesn't work inside of v-navigation-drawer

Bugs or Edge Cases it Helps Avoid

none

[jaxn]

This design pattern is in the Material guidelines too for where to place Help and feedback in a Nav drawer.

[KaelWD]

You have to put it in a column layout: https://codepen.io/anon/pen/pLJZGg?editors=1000

Not sure what our stance is on making drawers flex containers out of the box, might break some layouts.

[AlexSHoffman]

@KaelWD thanks for the example!

Since it's so easy to make it work, perhaps instead of making it work out of the box, it would be better to just add this example to the docs?

The only thing the example would have to mention is that you have to remove the default padding on v-navigation-drawer, otherwise this padding makes it look like it doesn't work properly

[XanderLuciano]

You can remove the default padding pretty easily as well.

<v-list class="py-0">

https://vuetifyjs.com/en/layout/spacing

[XanderLuciano]

Nesting this in a v-layout also breaks some styling such as this:

[affanshahid]

Is this the recommended way? Will it break anything?

[XanderLuciano]

@affanshahid Your font weight will not be the same due to how the CSS is scoped (using .navigation-drawer > .v-list means placing inside a .v-layout prevents the rule from apply). Not sure what else is affected though. Other than font weight, I'm not aware of any other issues.

[EqualMa]

To make v-spacer work in v-navigation-drawer, all you need to do is apply the following styles to v-navigation-drawer

.your-custom-class {
  display: flex;
  flex-direction: column; 
}

See this codepen: https://codepen.io/slandii/pen/JzaOYy?editors=1010

[johnleider]

Thank you for the Feature Request and interest in improving Vuetify. After careful consideration, this is not functionality that we are looking to implement at this time. It causes multiple issues with existing layouts and is easily resolved with @KaelWD 's workaround https://codepen.io/anon/pen/pLJZGg?editors=1000 .

I know that I referenced this in #6947 but that was a mistake, my apologies for the misunderstanding.

If you have any additional questions, please reach out to us in our Discord community.

[morphatic]

Working example with v2.0: https://codepen.io/morphatic/pen/ewWMvM?editors=1000

[jeffpohlmeyer]

@morphatic Have you figured out a way to do this using the new grid system? I'm trying to get away from using v-layout column setups but nothing I've found seems to work without creating my own custom css classes, which I feel like defeats the purpose of using a css library.

[oliveiracdz]

@JVP3122, did you try to use the new append slot?

[jeffpohlmeyer]

@JVP3122, did you try to use the new append slot?

Now I feel stupid because I clearly did not do this. Thanks for pointing me in the right direction

[morphatic]

Or: https://codepen.io/morphatic/pen/XWWxLXM?editors=1010

Allows you to keep the semantics of list items, but just add a couple of style rules to move the last list item to the bottom.