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

    Keep q-chat scrolled down as new message appears.

    Help
    6
    8
    1286
    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.
    • Z
      zzart last edited by

      Hi guys,
      I’m trying to replicate simple chat functionality using q-chat. I got really stuck to keeping the q-chat element always scrolled to the last element on the list.
      .col and .justify-end classes work only for the first few messages and as you starting to add more messages into the chat you have to manually keep q-chat scrolled down.
      The problem is I’ve tried all the tricks I knew with js scroll scrollTop etc. - none of it seems to be working . The closest I got was with using this.$refs.chat.scrollIntoView({block: "end"}) but it is still not ideal for longer messages as it aligns with the top of the last message and not the bottom of it.

      I’ve coded simple demo: https://codepen.io/zzart/pen/xxwVRXr
      Help would be greatly appreciated as I’ve been pulling my hair for over a week now.

      1 Reply Last reply Reply Quote 0
      • Z
        zzart last edited by

        So the question is why Element.scroll() ie. #chat.scroll() functions don’t work for q-chat ??? And if they don’t how do we suppose to scroll q-chat ??

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

          I add similar issue with scrolling chat messages, but I didn’t use q-chat. I ended up wrapping messages in a q-scroll-area and controlling scroll with

          q-scroll-area(ref="messages").fit
            TableChatMessage(:message="msg" v-for="(msg, index) in messages" :key="index" :size="fontSize")
          

          Then you can control the scroll position when you list change

          this.$refs.messages.setScrollPosition( ... )
          

          https://quasar.dev/vue-components/scroll-area

          1 Reply Last reply Reply Quote 0
          • Z
            zzart last edited by

            Hi @jraez, thanks for your suggestion. After some restructuring it worked in the end! Thanks a lot!

            1 Reply Last reply Reply Quote 0
            • F
              Fernando2684 last edited by

              @zzart can you share some example?

              1 Reply Last reply Reply Quote 0
              • I
                ilabutk last edited by

                I worked on the exact same problem. I got this to work:

                <q-scroll-area
                              ref="first"
                              style="height: 330px"
                              :delay="350"
                              @scroll="onScrollFirst"
                            >
                 // your div for chat messages here
                

                Then, define methods:

                scroll (source, position) {
                      this.$refs[source].setScrollPosition(position)
                    },
                
                    onScrollFirst ({ verticalPosition }) {
                      this.position = verticalPosition + 200
                      // this.scroll('first', verticalPosition + 150)
                      // console.log(this.position)
                    },
                

                At the time you enter/get a message, update the position variable:

                        this.scroll('first', this.position), 500)
                

                You need to adjust the height of your components (I used 350 …)

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

                  I tried this approach but it kept scrolling down when I tried to manually scroll up (with mouse or keyboard)… The scroll area appears to jump up and down.

                  I figured out that manually scrolling in the scroll area triggered the scroll event (I’m a little slow) which triggered the onScrollFirst method.

                  So my approach is only to scroll to the bottom when first entering the chat screen using the mounted hook and when the user enters a new message. Obviously it won’t scroll to the bottom if someone else enters a chat after the user scrolls up. But the trade off is that the user’s chat window won’t keep jumping to the bottom every time someone enters a message.

                  I used the function I found in this git issue: https://github.com/quasarframework/quasar/issues/6167.

                  Here’s my code:

                  html snippet:
                  <q-card class=“chat-list-card” flat bordered>
                  <q-scroll-area
                  ref=“chatScroll”
                  >

                  methods and mounted hook:
                  methods: {
                  …mapActions(‘messages’, [‘addMessage’]),
                  scroll () {
                  const scrollArea = this.$refs.chatScroll
                  const scrollTarget = scrollArea.getScrollTarget()
                  const duration = 350
                  scrollArea.setScrollPosition(scrollTarget.scrollHeight, duration)
                  },
                  async sendMessage () { // executed when user clicks ‘send’ button
                  try {
                  const messagesRef = firebaseStore.collection(‘messages’)
                  const newMessage = {
                  uid: this.message.uid,
                  playerName: this.message.playerName,
                  text: this.message.text,
                  avatarUrl: this.message.avatarUrl,
                  timestamp: Timestamp.fromDate(new Date())
                  }
                  await messagesRef.add(newMessage)
                  this.message.text = ‘’
                  this.scroll()
                  } catch (error) {
                  showMessage(‘Error’, Error saving new message to Firebase Database: ${error.message})
                  }
                  }
                  },
                  mounted () {
                  this.scroll()
                  }

                  metalsadman 1 Reply Last reply Reply Quote 1
                  • metalsadman
                    metalsadman @jrhopkins83 last edited by metalsadman

                    @jrhopkins83 thx for sharing. for readability, you can wrap the snippet in triple back ticks `.

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