Hi Bubble Community,
I’m working on a chat feature in my Bubble app, where I need to manage the visibility of the last message in a repeating group to trigger a UI element (like an arrow) when the last message is not visible. Here’s what I’ve done:
- Setup:
- Plugins Used: I’ve tried both the Visibility Detector plugin and the Viewport plugin (not simultaneously).
- HTML & JavaScript: I’ve also implemented custom HTML with JavaScript to detect the visibility of the last message.
- Dynamic IDs: Each message in the chat is assigned a unique ID attribute.
- Visibility Tracking: The visibility plugins are set to monitor the last message in the chat.
- Issue:
- The problem I’m facing is that when the first message in the chat scrolls out of view, the visibility detector or JavaScript triggers the UI element (the arrow) as if the last message is out of view, even though it isn’t. This happens regardless of whether I’m using the Visibility Detector plugin, the Viewport plugin, or my custom HTML/JavaScript solution.
- I’ve double-checked using the debugger and the browser console to confirm that the IDs are correctly generated and assigned to the necessary elements.
Question: How can I ensure that the visibility is correctly tracked for only the last message in the repeating group? Has anyone encountered this issue and found a way to accurately detect the visibility of just the last message without false triggers from earlier messages scrolling out of view?
Thank you in advance for any advice or solutions!
