Page in Layout not showing correctly

  • Hi all,

    I trying to using QLayout, but the side navigation and page are showing below the header toolbar and not below them.

    This is my MainLayout.vue component:

    <q-layout ref="layout" view="hHh LpR fFf" :right-breakpoint="1100">
        <q-toolbar slot="header">
            Asset Management
            <span slot="subtitle">Manage all your assets (addresses, identities, accounts, etc)</span>
        <q-tabs slot="navigation">
          <q-route-tab slot="title" icon="person" to="/identity" replace hide="icon" label="Identity" />
          <q-route-tab slot="title" icon="address" to="/address" replace hide="icon" label="Addresses" />
        <!-- Left Side Panel -->
        <div slot="left">
          <q-list no-border link inset-separator>
            <q-list-header>Essential Links</q-list-header>
            <q-side-link item to="/docs">
              <q-item-side icon="school" />
              <q-item-main label="Docs" sublabel="" />
            <q-side-link item to="/forum">
              <q-item-side icon="record_voice_over" />
              <q-item-main label="Forum" sublabel="" />
            <q-side-link item to="/chat">
              <q-item-side icon="chat" />
              <q-item-main label="Gitter Channel" sublabel="Quasar Lobby" />
            <q-side-link item to="/twitter">
              <q-item-side icon="rss feed" />
              <q-item-main label="Twitter" sublabel="@quasarframework" />
        <router-view class="layout-view"/>
        <q-toolbar slot="footer">
            Layout Footer

    Could someone help me around this issue?

    Thank you.

  • What do you mean “below the header toolbar and not below them”?

  • please provide a screenshot

  • my q-page-container (the top part) is hiding behind the q-header . what should i do

Log in to reply