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
    1. Home
    2. jrhopkins83
    3. Best
    J
    • Profile
    • Following 0
    • Followers 0
    • Topics 4
    • Posts 15
    • Best 2
    • Groups 0

    Best posts made by jrhopkins83

    • RE: Keep q-chat scrolled down as new message appears.

      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()
      }

      posted in Help
      J
      jrhopkins83
    • Unable to find node_modules/@capacitor/android/capacitor

      I’m trying to build a capacitor app for Android and get the following error when running quasar dev -m capacitor -T android:
      “Unable to find node_modules/@capacitor/android/capacitor. Are you sure @capacitor/android is installed? This file is currently required for Capacitor to function.”

      I was able to successfully develop an iOS app with capacitor. When I look in the src-capicitor/node_modules/@capacitor folder, I see a subfolder for ios but not android.

      I’ve googled solutions but can’t find any reports of the same problem.
      Steps:
      Created a new Quasar vue project
      ran quasar mode add capacitor
      ran quasar dev -m capacitor -T android

      I decided to try capacitor b/c I can’t get cordova to build with Android either after spending 2 days trying to resolve one problem after another.

      Really need to get this working so any help would be greatly appreciated.

      posted in CLI
      J
      jrhopkins83