Vuetify: [Feature Request] pre-defined layout: scrollable <main>

[robokozo]

I would like to be able to add a property to some tag in the pre-defined layout structure to allow only content inside the the

    <main>
      <v-container fluid>
        <router-view></router-view>
      </v-container>
    </main>

hierarchy to be vertically scrolled.

For instance, in order to achieve the following effect (no full page scroll, I want toolbar and footer always visible),
https://imgur.com/GrUKo7E

I need to add custom css:

  html {
    overflow: hidden;
  }

  body {
    overflow: hidden;
  }

  .application {
    height: 100%;
  }

  main {
    height: calc(100% - 56px - 36px);
  }

  .container {
    height: 100%;
    overflow: auto;
  }

I've had to repeat this twice already in separate applications when I can see this as being a really common use case.

[robokozo]

I just noticed the 'fixed' properties that are available for the toolbar and the footer. I guess that works most of the time, but I still have a longer than necessary scrollbar and some of the content is partially cut off by the header and footer

[sindrepm]

This can easily be achieved with a custom CSS class and unless the feature has widespread demand imho it should be left out of Vuetify core to prevent "feature creep".

[tommie]

I have to second the move of the scrollbar to

when the toolbar is fixed. It makes no sense from a UX perspective to have a full-height scrollbar if the toolbar isn't being scrolled away.

From other GitHub issues reported, it seems the reason to have a scrollbar always present on is to allow tall dialog boxes. I'd think having the dialog boxes handle scrolling themselves, with their heights capped to the screen height, would make more sense as the default. That would also allow having a separate scrolling region in them so the buttons footer is always visible.

Essentially; for an SPA treating the screen as an endless stream of paper is odd. I want to be able to add headers and footers without fuzz, and just have the main content scrollable (which, again, should be visually indicated by the scrollbar only spanning that main content).

As a new user to Vuetify (coming from Polymer), this feels like a POLA violation.

[KaelWD]

This is very easy to do with custom css, but also hard to do in a way that will work at a framework level. I'm going to agree with @sindrepm on this.
Here's how simple it is: https://codepen.io/anon/pen/bYxpge
Note that menus will not work as expected with this setup due to #795

@tommie - Dialogs do handle scrolling themselves, and you can use the scrollable prop to have fixed header and actions regions.

[tommie]

Yeah, it was just an unexpected default for the reason I mentioned, and I couldn't find a good example of "do this to get what you expect from an SPA".

Thanks for the codepen. Having that as a reference in this bug will probably make it less of an issue.

[cristoferfb]

no solution for this right now ?

[KaelWD]

We're considering this as a possibility for 1.2.

[johnleider]

This is something I definitely want to do, but it did not make the cut for v2.0. Thank you for your patience!

[dakshshah96]

@johnleider With the release of 2.0, what is the right way of making my content in a router-view surrounded by a fixed layout scrollable?

I've always felt that I resort to "hacks" like targeting the html or body tags. Would love to know the correct way to do this if you have the time.

<v-app>
    <v-navigation-drawer app temporary v-model="showNavigation">
        <v-list dense nav class="pt-5">
            <v-list-item v-for="item in items" :key="item.title" link class="mb-3">
                <v-list-item-content>
                    <router-link :to="item.link">
                        <div class="title">{{ item.title }}</div>
                    </router-link>
                </v-list-item-content>
            </v-list-item>
        </v-list>
    </v-navigation-drawer>

    <v-app-bar color="black" dark>
        <v-app-bar-nav-icon @click.stop="showNavigation = !showNavigation"></v-app-bar-nav-icon>
        <v-toolbar-title>{{ currentNav }}</v-toolbar-title>
    </v-app-bar>

    <v-content>
        <router-view></router-view>
    </v-content>
</v-app>

[Shinigami92]

When using the solution of https://github.com/vuetifyjs/vuetify/issues/2132#issue-264459851, the v-menu, v-select and v-autocomplete gets detached.

So now I'm using something like this

  //- ...
  v-menu(bottom, left, attach=".v-main__wrap #menu-target")
    template(v-slot:activator="{ on }")
      v-btn(v-on="on", icon)
        v-icon more_vert
      #menu-target.body-1 // .body-1 is needed because otherwise the font style of the wrapping `v-card-title` would be applied 😒
    v-list
      v-list-item
        //- content

Could we maybe move this workaround into vuetify itself?
So if the is a menu in .v-main__wrap and .v-main__wrap has overflow: auto, then add a dummy referencable div in v-menu and use this as attach?

Does someone have a better idea or workaround?

[Shinigami92]

Further tryings:

//- ...
#wrapper-1
  v-select(attach="#wrapper-1 > .v-select", ...)