How to remove the left area of a QLayout?

wpq

I built a default layout using the Layout Builder, to have one drawer on the right. It is defined as

<template>
  <q-layout view="hHh lpR fFf">

    <q-header elevated class="bg-primary text-white" height-hint="98">
      <q-toolbar>
        <q-toolbar-title>
          <q-avatar>
            <img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg">
          </q-avatar>
          Title
        </q-toolbar-title>

        <q-btn dense flat round icon="menu" @click="right = !right" />
      </q-toolbar>

      <q-tabs align="left">
        <q-route-tab to="/one" label="Page One" />
        <q-route-tab to="/two" label="Page Two" />
      </q-tabs>
    </q-header>

    <q-drawer show-if-above v-model="right" side="right" elevated>
      <!-- drawer content -->
      this is the content of the drawer
    </q-drawer>

    <q-page-container>
      <router-view :key="$route.fullPath"/>
    </q-page-container>

    <q-footer elevated class="bg-grey-8 text-white">
      <q-toolbar>
        <q-toolbar-title>
          <q-avatar>
            <img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg">
          </q-avatar>
          Title
        </q-toolbar-title>
      </q-toolbar>
    </q-footer>

  </q-layout>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      right: true
    }
  }
}
</script>

Despite not having defined a drawer on the left side, I still get an area on the left I do not know how to get rid of:

What should I do so that the central part starts directly on the left edge?

jraez

What are the styling options you applied on the q-page (displayed within router-view)?
It’s justify-center in the layout builder example but in your case, it looks like more justify-end. You can set justify-start. Does your q-page have a fixed position/width ?

wpq

@jraez thank you for your answer. I did not style anything - I used the default skeleton from the builder.
I pushed my code to https://gitlab.com/WoJ/testmarkdown in case it is easier to understand what went wrong.

Sorry for the quality of the code - I am just starting with Quasar and did not go too far yet.

EDIT: I just checked across all the sources, there is no justify- anywhere.

dobbel

@wpq eummm did you modify App.vue? You basically have 2 files with a q-layout and drawer, layouts/MainLayout.vue and App.vue

Both are being used. MainLayout.vue because it used in the router and App.vue because of index.template.html

MainLayout.vue contains the left drawer
App.vue contains the right drawer

this is the template of my App.vue

<template>
    <div id="q-app">
        <router-view/>
    </div>
</template>

nothing more

wpq

@dobbel : where is MainLayout.vue used in the router?

I did modify App.vue to use it as the main component (instead of delegating further) - I will revert to the default if needed but I do not see where MainLayout.vue is used.

dobbel

@wpq under /src/layouts

wpq

@dobbel : sorry, being new in Quasar, I do not exactly get your point.
I do have MainLayout.vue in src/layouts but it is not used anywhere (it comes from the default skeleton).

Is the mere fact that it exists a trigger for it being used somehow? (sorry if this is obvious, but I am a bit lost)

dobbel

yes it is used. See:

src/router/routes.js

It is used because the default Quasar app is router enabled, and uses the MainLayout.

wpq

@dobbel

This is routes.js (from the repo I mentioned earlier (https://gitlab.com/WoJ/testmarkdown/-/blob/master/src/router/routes.js)

import Main from "layouts/Main"
import RenderMD from "components/RenderMD"

const routes = [
  {
    path: '/',
    component: Main,
  },
  {
    path: '/one',
    component: RenderMD,
    props: {
      title: 'One',
      hello: true,
      filename: 'subdir/one.md'
    }
  },
  {
    path: '/two',
    component: RenderMD,
    props: {
      title: 'Two',
      hello: true,
      filename: 'subdir/two.md'
    }
  },

  // Always leave this as last one,
  // but you can also remove it
  {
    path: '*',
    component: () => import('pages/Error404.vue')
  }
]

export default routes

Main.vue is almost empty:

<template>
<div>
 This is the main page
</div>
</template>

<script>
    export default {
        name: "Main"
    }
</script>

<style scoped>

</style>

dobbel

@wpq I see you a right.

dobbel

your git repo code does not run. Check it out and try…

You removed the
id="q-app"

dobbel

@wpq you made a big mess

the left drawer is in RenderMD.vue.

I changed your code and got a

right drawer( and no left )
correct working Layout
correct App.vue
correct routes.js ( childeren)

Do you want the code? You can than compare it to yours.

wpq

@dobbel yes please

I guess I should follow the template instead of fiddling around

dobbel

@wpq pm you with link

Yes you should try to first understand the default quasar app.

wpq

@dobbel Thanks, I appreciate the help!

dobbel

@wpq did you manage to fix it?

wpq

@dobbel : yes, thanks. I actually restarted from the bootstrapped skeleton keeping the structure. It will help in future apps to be consistent.

No More Posting New Topics!

How to remove the left area of a QLayout?