Odd scrolling behavior (Solved)



  • Hi there

    I have the following layout:

    odd_scrolling_behavior.png

    What I want:

    • Only the middle section “Chat Messages” (between the two drawers) should scroll
    • The scrollbars only show in the middle section

    What actually happens:

    • The right drawer scrolls along
    • The scrollbars are to the far right

    Here is the corresponding code:

    <template>
      <div class="q-pa-md flex">
        <q-layout view="hHh Lpr lff" container style="height: 500px" class="shadow-2 rounded-borders">
          <q-header class="bg-blue-grey-9">
            <q-toolbar>
              <q-btn flat @click="drawerLeft = !drawerLeft" round dense icon="menu" />
              <q-space/>
              <q-btn flat @click="drawerRight = !drawerRight" round dense icon="menu" />
            </q-toolbar>
          </q-header>
    
          <q-drawer
            v-model="drawerLeft"
            show-if-above
            bordered
            :width="200"
            :breakpoint="700"
          >
              <div class="q-pa-sm">
                <div>IVE Picture</div>
              </div>
          </q-drawer>
    
          <q-drawer
            side="right"
            v-model="drawerRight"
            show-if-above
            bordered
            :width="200"
            :breakpoint="600"
          >
              <div class="q-pa-sm">
                <div>Tools and Debug</div>
              </div>
          </q-drawer>
    
          <q-page-container>
             <q-page class="q-pa-sm">
                 <div v-for="n in 50" :key="n">Chat message {{ n }} / 50</div>
              </q-page>
          </q-page-container>
    
        </q-layout>
      </div>
    </template>
    
    <script>
    export default {
      name: 'IveChat',
      data () {
        return {
          drawerLeft: false,
          drawerRight: false
        }
      }
    }
    </script>
    

    Any ideas to get this right?

    Cheers,
    Michael



  • Any particular reason why you are using a layout within a layout?

    Scott



  • @s-molinari

    I’ve based the above on an example I saw on the docs, so no - there is no specific reason apart from the fact that it looked like I wanted. What would be the proper way of making this work (left drawer - content - right drawer) ?

    Cheers,
    Michael



  • You have all that in your outside layout. So, create your chat window on the page itself, without the inside layout.

    Scott



  • @s-molinari

    I think I need a little more context. I’m still new on the web side of development and am probably making rookie mistakes…

    Removing the “inner” layout messes up the whole app:

    odd_scrolling_behavior2.png

    Chers,
    m.



  • Would you be up to adding what you have to a codesandbox? https://codesandbox.quasar.dev

    Fork the sandbox and add your code.

    Scott



  • Try to play with layout builder, must be a setting in view prop so scrolling wont tag along, tho eventually it will scroll along when youve scrolled at bottom end or top ends of your child component.



  • @s-molinari
    All right, I’ve created a sandbox and uploaded the relevant files: https://codesandbox.io/s/codesandbox-app-c16tu

    @metalsadman
    I have been working with the layout builder, although I get the feeling its only usable to create layouts that are the “main layout” for the whole app. It does not seem to really show how to create a “child layout” like I need it in the “Chat” view.

    The aim is as follows:
    The main app should consist of the custom chrome, top toolbar and left drawer. Depending on what icon I click on the drawer, the ‘pane’ to the right is showing the appropriate content - whatever that may be: like the settings page with the given layout or the chat window.

    Here’s a mockup:
    nxclient_mockup.png

    I am just completely lost on how to integrate all that together - I’m missing the best practices / approaches that are probably common in web dev.

    Cheers,
    m



  • another note: The scrolling in the sandbox does not behave like it does in my electron app (sigh). With electron - the text in the right drawer also scrolls along with the central content…



  • @mboeni it’s not odd really, the docs does the same. anyway you can use https://quasar.dev/vue-components/scroll-area#Introduction. https://38pvj.sse.codesandbox.io/ivechat, just do something with the css height etc… to get where you want it.



  • @metalsadman Yep, QScrollArea did the trick. Thanks for your help!


Log in to reply