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

    QLayout, Headers, and scrolling

    Help
    4
    5
    769
    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.
    • J
      jmbldwn last edited by

      If I create a simple layout with a header and a scrollable main window area, quasar seems to make the scrollable area start at the top of the screen (at the top of the header) and adds padding to the top of the scrollable area so its content can’t be scrolled under the header. This leads to an odd-looking behavior with the scroll bar, and any use of classes that define an element within that window to have 100% height makes the elements larger than the actual window.

      You can see this in the docs for a basic layout. Note the way the scroll bar goes up under the header at the top: https://quasar.dev/layout/page#Example--Basic

      What I really want is the top of the child area to be at the bottom of the header, so the scroll bar looks right, and the child window has the right actual window height that its children can inherit.

      I think I can pull this off with flex classes, but it feels like I’m swimming upstream as I would have to override a lot of existing layout classes.

      Is there a better way?

      digiproduct 1 Reply Last reply Reply Quote 0
      • digiproduct
        digiproduct @jmbldwn last edited by digiproduct

        @jmbldwn I think if you went and played with the Layout Builder, you’d instantly be able to achieve the look you desire.

        https://quasar.dev/layout-builder

        It’s linked from the Layout section in the docs, but I’ve given you the direct link.

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

          I’ve been trying that. Mostly it lets you decide what the left- and right-drawers do. I can’t seem to get it to constrain the main page space.

          1 Reply Last reply Reply Quote 1
          • C
            christian_f last edited by

            Hi, long time ago… But the issue is the same today. I really try many configurations. In all the examples on the framework documentation we have the same feature. As jmbldwn said “Note the way the scroll bar goes up under the header at the top: https://quasar.dev/layout/page#Example--Basic”. In other situation I will use a “q-page-sticky” but in this case I can’t. I want to really have header width of 100%, without the side scrollbar. The scrollbar has to stay under the header. When I’m using the layout setting “hHh”, the header is correctly fixed on the top, no issue when scrolling. It’s unpleasant to have a scrollbar on the side of an element that is not affected by the scroll. Best regards. Christian

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

              So anyone got a real solution how to prevent the scrollbar going through the header?

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