Scrollbar inside window

[Remo]

We currently have overflow: hidden on .layout-view. Since we also have a max-width on the same class we get a scrollbar in the middle of the window. No problem on a touch device, but a bit ugly on a desktop. Why not set overflow: auto on .layout-content? That way the scrollbar would be on the right border of the window.

[rstoenescu]

A view template should have the structure below. Notice a main empty <div>. Don’t change anything to that. Your template should be inserted as a direct child of this node. Won’t go into details, but this is required due to how Vue Router works and Quasar implements a cross-browser solution to handle how your view is displayed, so every property you see there has a reason.

If you don’t follow this structure you may end up with scrolling not being placed on the far right.

<template>
  <!-- root node required -->
  <div>
    <!-- your content -->
    <div class="layout-padding">
      <!-- if you want automatic padding -->
    </div>
  </div>
</template>

Sidenote: This is taken from /templates/view.vue file (can use it to make components for your app using this template with the CLI http://quasar-framework.org/guide/quasar-cli.html#Generating-Components)

[Remo]

Thanks! Turned out that my issue is a different one. In an attempt to avoid unnecessary DIVs I’ve added both layout-view and layout-padding to the same DIV. Turns out that this isn’t a good idea. Moved layout-padding into a separate DIV, scrollbar moved nicely to the right.