No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    How to remove the left area of a QLayout?

    Help
    drawer layout
    3
    17
    710
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • W
      wpq last edited by

      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:

      enter image description here

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

      1 Reply Last reply Reply Quote 0
      • J
        jraez last edited by

        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 ?

        1 Reply Last reply Reply Quote 0
        • W
          wpq last edited by 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 1 Reply Last reply Reply Quote 0
          • dobbel
            dobbel @wpq last edited by 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

            1 Reply Last reply Reply Quote 0
            • W
              wpq last edited by

              @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 1 Reply Last reply Reply Quote 0
              • dobbel
                dobbel @wpq last edited by

                @wpq under /src/layouts

                1 Reply Last reply Reply Quote 0
                • W
                  wpq last edited by 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 1 Reply Last reply Reply Quote 0
                  • dobbel
                    dobbel last edited by 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.

                    1 Reply Last reply Reply Quote 0
                    • W
                      wpq last edited by 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>
                      
                      
                      1 Reply Last reply Reply Quote 0
                      • dobbel
                        dobbel @wpq last edited by

                        @wpq I see you a right.

                        dobbel 1 Reply Last reply Reply Quote 0
                        • dobbel
                          dobbel last edited by dobbel

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

                          You removed the
                          id="q-app"

                          1 Reply Last reply Reply Quote 0
                          • dobbel
                            dobbel @dobbel last edited by 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.

                            1 Reply Last reply Reply Quote 0
                            • W
                              wpq last edited by

                              @dobbel yes please 🙂

                              I guess I should follow the template instead of fiddling around 🙂

                              dobbel 1 Reply Last reply Reply Quote 0
                              • dobbel
                                dobbel @wpq last edited by dobbel

                                @wpq pm you with link

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

                                1 Reply Last reply Reply Quote 0
                                • W
                                  wpq last edited by

                                  @dobbel Thanks, I appreciate the help!

                                  dobbel 1 Reply Last reply Reply Quote 0
                                  • dobbel
                                    dobbel @wpq last edited by

                                    @wpq did you manage to fix it?

                                    1 Reply Last reply Reply Quote 0
                                    • W
                                      wpq last edited by

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

                                      1 Reply Last reply Reply Quote 0
                                      • First post
                                        Last post