Scrollbar inside window

  • 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.


  • Admin

    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.

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

    Sidenote: This is taken from /templates/view.vue file (can use it to make components for your app using this template with the CLI

  • 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.

Log in to reply