I'm sure I'm missing something obvious but I tried this any way I can think off. I have a webblock with, among others, a scrollable area on it. In the scrollable area is a list widget. I want to automatically scroll to the bottom of the list so in the OnAfterFetch action I execute this bit of JavaScript:
var element = document.getElementById('Messages');element.scrollTop = element.scrollHeight - element.clientHeight;
Messages being the name of the list widget (I also tried the name of the scrollable area or the container above it). I get no errors but the scroll position doesn't behave as intended. Help anyone?
Hey Philip... Hmmm...
I was think in 3 possibilities here:
1. Ensure Code Execution at the Right Time (OnAfterFetch or OnRender - lemme know if you need more details about it)
2. The 'Messages' is a Unique Identifier for the Element?
3. Try to adjust the JS... Something like:
setTimeout(function() {
var element = document.getElementById('Messages');
if (element) {
element.scrollTop = element.scrollHeight;
}
}, 100); // Delay of 100ms
Lemme know if works.
Hi ielito,
Thanks for taking the time to help me out.
This is the structure of the elements:
I was thinking that the problem may have to do with the fact that I put this webblock on the screen of another application. Would that require any additional measures?
Edit: I also tried this without the two columns set-up by setting the width to 6 columns. This made no difference either.
Hello,
You can also try JavaScript
Hello, friend
You can also try ScrollToElement
But the element "Messages" is in view, it's just scrolled to the top by default. How would it know the child element to put into view?
Hey Philip,
Hmmmm got it!
integrating a web block into another application screens, it sounds like the issue could indeed be influenced by how the web block is embedded and rendered within the host application.....
In this case, please take a look if all Styles and Scripts are loaded fine... sometimes certain CSS or JS files might not load as expected. And about JS, please... it's crucial to ensure that your js runs after the entire web block (and possibly the entire host page) has fully loaded.
And about JS.... since the content might by dynamically... we can change something here using MutationObserver...
const observer = new MutationObserver(function() {
});
observer.observe(element, { childList: true, subtree: true });
}, 100);
If all this not working, please use console.log(element.scrollHeight, element.clientHeight) to debug the values and ensure they are what you expect. Also, use the chrome debug or other browser's developer tool to inspect the #messages element and its parentes... Here, look for any overflow properties or other CSS that might restrict scrolling...
Lemme know, great Friday!
No cigar. For the sake of my sanity I'm gonna let this rest for now. On top of dealing with OutSystems' shenanigans when trying to dynamically size all the divs and the scrollable area, I'm quite ready for the weekend. For now, I've reversed the sorting of the table which turns out to be an unsurprisingly unsatisfactory but surprisingly acceptable solution.
I'll get back to this post when I figure it out.
I'm sorry to hear about your experience. If you need to revisit this next week, I'll be here :)