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">
          <q-toolbar-title>
            Asset Management
            <span slot="subtitle">Manage all your assets (addresses, identities, accounts, etc)</span>
          </q-toolbar-title>
        </q-toolbar>
    
        <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" />
        </q-tabs>
    
        <!-- 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="quasar-framework.org" />
            </q-side-link>
            <q-side-link item to="/forum">
              <q-item-side icon="record_voice_over" />
              <q-item-main label="Forum" sublabel="forum.quasar-framework.org" />
            </q-side-link>
            <q-side-link item to="/chat">
              <q-item-side icon="chat" />
              <q-item-main label="Gitter Channel" sublabel="Quasar Lobby" />
            </q-side-link>
            <q-side-link item to="/twitter">
              <q-item-side icon="rss feed" />
              <q-item-main label="Twitter" sublabel="@quasarframework" />
            </q-side-link>
          </q-list>
        </div>
    
        <router-view class="layout-view"/>
    
        <q-toolbar slot="footer">
          <q-toolbar-title>
            Layout Footer
          </q-toolbar-title>
        </q-toolbar>
      </q-layout>
    

    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


Log in to reply
 

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