How to remove the left area of a QLayout?
-
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?
-
What are the styling options you applied on the q-page (displayed within router-view)?
It’sjustify-center
in the layout builder example but in your case, it looks like morejustify-end
. You can setjustify-start
. Does your q-page have a fixed position/width ? -
@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. -
@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 drawerthis is the template of my App.vue
<template> <div id="q-app"> <router-view/> </div> </template>
nothing more
-
@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 whereMainLayout.vue
is used. -
@wpq under /src/layouts
-
@dobbel : sorry, being new in Quasar, I do not exactly get your point.
I do haveMainLayout.vue
insrc/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)
-
yes it is used. See:
src/router/routes.js
It is used because the default Quasar app is router enabled, and uses the MainLayout.
-
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>
-
@wpq I see you a right.
-
your git repo code does not run. Check it out and try…
You removed the
id="q-app"
-
@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.
-
@dobbel yes please
I guess I should follow the template instead of fiddling around
-
@wpq pm you with link
Yes you should try to first understand the default quasar app.
-
@dobbel Thanks, I appreciate the help!
-
@wpq did you manage to fix it?
-
@dobbel : yes, thanks. I actually restarted from the bootstrapped skeleton keeping the structure. It will help in future apps to be consistent.