make q-layout fixed margin-top when scrolling



  • hey everyone,
    I have 2 main questions about the q-layout:
    firstly , I have a problem when scrolling down the q-layout moves up and disappear behind the header ,I managed to do so using the q-scroll-area
    but unfortunately this is not working in the responsive mobile screen i.e the layout keep scrolling under the header.
    the second problem I am facing is with the height of the q-layout.
    I need to resize it so it fits exactly the size of the screen.
    I tried setting min-height and max-height and even tried some css equatin to resize the height but none of these worked properly in the responsive mood.
    the first video explains my first problem as the curve of the header in the top disappear by the layout beneath.
    https://drive.google.com/file/d/1l2y8cABAPBpoEmZZVDFiB3KvQBxnzPTx/view?usp=sharing
    and the second video explains how the layout height is not resized because of the white space.
    https://drive.google.com/file/d/1x45aNq5p_O34QUIiWUkUiP-pFZOP99ht/view?usp=sharing

    thanks in advance.
    Sorry for the elongation 😃



  • @ghadaYoussef

    layout keep scrolling under the header

    So what is your desired behavior? I watched the video a couple of times(no sound) and I don’t understand what you do want to happen if your scroll down.

    how the layout height is not resized because of the white space.

    Could be a lot of things. To get better support here , please post code listings of at least your q-q-layout and q-page with the proper style (start with 3 backticks ` and you get this and end with 3 backticks) . Even better create a codepen.io that shows your problem.( Tip: you can easily extend one of quasar examples codepens)


Log in to reply