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.

    0_1478959058843_upload-77db28a0-8abb-4d02-9365-c401069727c4


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

    <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)



  • 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
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.