Hello to great team of KT Metronic.
I'm trying to keep vertical scrollbar not on to zero but at the bottom, because I'm adding rows into div.scroll.h-400px.row-container by clicking on button.add-row. Newly added rows stays hidden outside visible area because the scrollbar is always on top vertically.
To see newly added row I have to keep scroll down.
Is there a way to keep scrollbar at the botttom which shows the end of div.scrool container not top?
Hi ,
You can use the below code to scroll to the bottom:
const scrollEl = document.querySelector("#my_scroll");
scrollEl.scrollTop = scrollEl.scrollHeight;
Thank you for your quick reply!
I was actually talking about the scroll here:
https://preview.keenthemes.com/html/keen/docs/general/scroll
my container div height is 300px and I'm adding rows into the container div by clicking on 'add-new-row' button. When the inner rows total height is more than 300px the scroll is added. But when I add rows again the added rows stays outside visible area of the container. I have to scroll down to see the last added row.
So I wanted to know if there is any 'helper' to keep scroll bar at the bottom letting last added row inside visible area.
Thank you!
Not the scroll to top.
Apologies if I did not make myself clear.
Hi,
The above code should work to scroll down the scroll element as it works here. Try to add chat message and you can see how it gets scrolled down.
Regards
That worked perfect. Thank you for your help.
I added your code here:
var parentDiv = document.querySelector(".current-conditions");
var addButton = document.getElementById("add_Cfilter");
document.addEventListener("click", function (event) {
if (event.target.classList.contains("remove-current-filter")) {
event.stopPropagation();
handleRemoveFilter(event.target);
}
});
// Event listener for "Add FC Filter Condition by cloning for demo"
addButton.addEventListener("click", function () {
var template = document.querySelector(".added-fc-row");
var clone = template.cloneNode(true);
var rowNumber = parentDiv.children.length + 1;
clone.querySelector(".fc-row-number").textContent = rowNumber + ".";
var removeButton = clone.querySelector(".remove-current-filter");
removeButton.addEventListener("click", function (event) {
event.stopPropagation();
handleRemoveFilter(event.target);
});
// If there is more than one, remove the "disabled" attribute
if (parentDiv.children.length > 0) {
clone.querySelector(".remove-current-filter").removeAttribute("disabled");
}
parentDiv.appendChild(clone);
// Keep scrolled down while adding new fc row
const scrollEl = document.querySelector("#inboxfilterConditionsRows");
scrollEl.scrollTop = scrollEl.scrollHeight;
});
Hi ,
Great! Glad to hear that.
If you liked Keen and would love to support it could you please consider leaving a 5-star review here: https://themes.getbootstrap.com/product/keen-the-ultimate-bootstrap-admin-theme
This would help with the sales and motivate our team to improve Keen further with amazing updates.
Regards.