Questions about layout

  • Just trying to figure out how the Layout Component works.

    1. I still don’t get the view code. hhr lpr llh
      For the most part I have it how I want, but the right side bar seems to pass through the header when I open and close it. (Side bar is blow the header).
      Not sure how to fix that.

    2. How do I have the side bar start closed.

    3. I can’t figure out how to load a menu page into the main view area. I tried setting up some routes /test/main that does take me to the page, but no menu at the top.

  • I think I solved one part. In the document it said :
    “If your layout uses Vue Router sub-routes (recommended), then it makes sense to use Vue’s <router-view> component, which is just a placeholder where sub-routes are injected.”

    I thought sub routes was /test and test/sub-route-page.
    But that doesn’t seem to be the case, sub-routes = children pages
    I can’t figure out why the child page has a scroll bar.

  • regarding the view code:

    // split your screen in 9 pieces
    X   X   X
    X   X   X
    X   X   X
    // the center is the page content
    X   X   X
    X   p   X
    X   X   X
    // top is header, bottom is footer
    X   h   X
    X   p   X
    X   f   X
    // left and right drawers
    X   h   X
    l   p   r
    X   f   X
    // who gets the corners?
    // in this case both top corners go to header, bottom corners to respective drawer
    h    h   h
    l    p   r
    l    f   r
    // finally scrolling. using an upper case letter will
    // for header/footer make them non scrolling. They will be fixed while page content scrolls
    // drawers: they get their own scroll, not shared with page scroll
    // I want my header fixed to the top, and both drawers to have their own scroll. 
    // My footer should stay at the bottom, and only appear once the whole page has been scrolled down
    // result
    H  H  H
    L  p  R
    L  f  R
    // finally place those in one line, slicing the block horizontally:
    view="HHH LpR LfR"
    // I hope this helps

  • Thanks @benoitranque this should be linked in documentation. Finally simple and understandable explanation of the view property!

  • @kosirm it’s explained here“view”-prop furthermore, you can test (interactively) how it would look like thru the layout builder 2nd step.

  • Thanks @metalsadman yes i know i read that … but @benoitranque explainded it better for my taste 🙂

Log in to reply