How can I force an element such as row or column to have a certain height and force a vertical scroll bar? I’ve tried changing the height class and adding “overflow-auto” but I can’t get anything to change.
Thanks!
Note: Just a word of caution though. Be sure your scrollable area is shorter than what would be seen in a mobile device. If your scrollable div takes up a full screen on a mobile device your users may not be able to scroll to other content.
1 Like
@Logan, hello
You make the right settings. Try again. In the end you will get it: https://howitisdone.info/rowandcol.html
To make sure that this does not happen, change the suggested style rule to (adjust the 150px value to suit):
.anyClass {
max-height: calc(100vh - 150px);
overflow-y: auto;
}
1 Like
@brad thank you that worked! haven’t noticed any issues but if I do I’ll try @ben 's solution.
Bonus round: How to scroll to the bottom of the element automatically on page load?
@Logan, hello
Don’t know if there is a simple solution in Wappler itself to do auto-scrolling when the page loads. But you can insert a small script code into the page, and the task will be done:
The code is inserted inside the , the script code is very simple:
window.onload = function() {
var el = document.getElementById(‘endcontent’);
el.scrollIntoView(false); // scroll to the bottom of the element
};
endcontent is my element id to which I will scroll. You will exchange it for your own.
The page works like this: https://howitisdone.info/rowandcol.html
2 Likes
Thanks! @Mr.Rubi
I’m getting the error “cannot read property scrollintoview of null”
I’m trying to use this on a card class using a repeat dynamic attribute based on a datatable. So I imagine this can’t work as I can’t set an ID for the last card in the repeat?
@Logan, too little information, it is difficult to understand what is wrong and what is the task, based on what you wrote.
Give an example of your page, and describe the task in more detail. I am sure that an effective solution can be found.
@Mr.Rubi here is the live page I’m working on. It’s currently being used as a group chat for a climbing team that has members that aren’t on social media:
@Logan, Hi!
Good news, I found the perfect solution to your problem.
For a start. The mistake you’re getting is right. You assign a unique id to an element that repeats dynamically, which causes two problems at once:
- Many elements on the page have the same id - this can not be.
- Due to the fact that the id is non-unique the script cannot be executed.
When I looked at your page, at first it seemed to me that the solution would be very simple. But after writing several variants of the script, I ran into a problem. The script did not work when loading the page, but only when setting the setTimeout method. However, this is a very bad decision, because different users may take different time to load the page. And if the specified delay is less than the time of loading the user’s page, the script will not work specifically for this user.
After I spent 4 hours solving the problem, it became a personal matter for me.
The end of the story is epic! The most correct and optimal solution was the implementation option using internal tools of Wappler, without using the code at all! The solution is literally three clicks away! “Oh my God!” I thought, when the problem, which struggled for 6 hours, I decided in 30 seconds without any code…
Decision:
Step1. Remove the id from the class="card" element. Then under it create a div to which you will assign id=“endcontent”. The structure of the code will look like this:
Step2. In App Connect go to the animation and add Smooth scroll to the page:
Step3. Select the Server connect page which is responsible for unloading messages and create a Dynamic event (dmx-on: success):
As an action, select the previously created Smooth scroll and create a move to our element with id=“endcontent”:
Done!
The result here: https://howitisdone.info/autoscroll1.php
1 Like
Wow! I didn’t mean to send you on such a quest but thank you! It works and it’s awesome that the solution uses a Wappler component.
Again thank you @Mr.Rubi so much for taking all this time to help me out. The Wappler community continues to amaze me!!
I changed it up a little bit so that the scroll is trigged by button click and page load instead of server connect. Because of this I can add a repeat action that causes a refresh of the chat table every 2 seconds. So now a message sent from any device will cause the scroll for all devices. In other words a fully funcitonal chat app without a single line of code. Wappler is cool!
1 Like