Scrollbar inside window
We currently have
.layout-view. Since we also have a
max-widthon 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
.layout-content? That way the scrollbar would be on the right border of the window.
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.vuefile (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)
Thanks! Turned out that my issue is a different one. In an attempt to avoid unnecessary DIVs I’ve added both
layout-paddingto the same DIV. Turns out that this isn’t a good idea. Moved
layout-paddinginto a separate DIV, scrollbar moved nicely to the right.