multiple q-layouts that toggle



  • In the project i’m working on there is a q-layout with q-side-links on the left side. I have a second q-layout with q-side-links that is just a smaller version of the first with thumbnails. When one q-layout closes the other opens. Because of the multiple q-layouts there is a lot of white space left to scroll down. It appears that even though one of the q-layouts is hidden it doubles the height necessary for the page. Is there any way to prevent having this extra height because of the multiple q-layouts?



  • Couple things there.

    First: hard to help you without seeing your code
    Second: q-layouts do not close or open. Not sure what you are talking about.
    Third: Using a v-show on a q-layout would result in the behavior you describe, as this hides the element but it still is there. Use v-if instead
    Fourth: You are not supposed to have multiple q-layouts in the same file or active at the same time.
    Fiftht: Have you considered using routes for this? This is how I handle it:

    // router.js
    
    routes: [
          {
          path: '/',
          component: load('Layout1'),
          children: [
            {
              path: '',
              component: load('Index')
            },
            {
              path: '404',
              component: load('404')
            },
           {
              path: 'route1',
              component: load('Route1')
            }
          ]
        },
        {
          path: '/',
          component: load('Layout2'),
          children: [
            {
              path: 'route2',
              component: load('Route2')
            }
          ]
        },
        { path: '*', redirect: '/404' } // Not found
    ]
    

    In this example, note the default and 404 routes. When matching a route, the first match is used. So we first look for a suitable route using layout1, then using layout2.
    '/route1' would use the first layout, '/route2' the second one. You could also have a function that returns a different layout depending on a variable.


Log in to reply
 

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