Drawer on top of the header



  • Hello All,

    I am trying to put left drawer above my header ( on top of header in left side ) . But no luck . The drawer is starting always below the header .
    Could any one please help me to fix this one ? Below is the code .

    ( I remember I made it working couple of weeks ago , but can not remember what I had done )

    Thank You .

    ==============================================================

    
    <template>
      <q-layout>
        <q-drawer   ref="leftDrawer">
          <div class="toolbar light">
            <q-toolbar-title :padding="1">
              Left-side Drawer
            </q-toolbar-title>
          </div>
          <p style="padding: 25px;" class="text-grey-7">
           Test Drawer
          </p>
        </q-drawer>
         <div slot="header" class="toolbar">     
        </div>
        <router-view class="layout-view"></router-view>
      </q-layout>
    </template>
    <script>
    
      export default {
        data () {
          return {
            search: ''
          }
        }
      }
    
    </script>
    

  • Admin

    @kiranvasi Hi, this is currently not possible, but targeting the ability to enable this for v0.14. Cheers.



  • Thank you @rstoenescu for taking time to respond to my question . Good luck . For now I am using the below work around ( Using two <q-layout> tags :) I know this is not the way to do it . But to get the feel of look

    <template>
      <q-layout>
        <q-drawer   ref="leftDrawer">
          <div class="toolbar light">
            <q-toolbar-title :padding="1">
              Left-side Drawer
            </q-toolbar-title>
          </div>
          <p style="padding: 25px;" class="text-grey-7">
           Test Drawer
          </p>
        </q-drawer>
    <q-layout>
         <div slot="header" class="toolbar">
      </q-layout>   
        </div>
        <router-view class="layout-view"></router-view>
      </q-layout>
    </template>
    <script>
      export default {
        data () {
          return {
            search: ''
          }
        }
      }
    </script>
    <style type="text/css">
      .drawer{
        z-index: 999;
      }
    </style>

Log in to reply
 

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