Apex Code Development You need to sign in to do that
Don't have an account?
Tom Sesselmann handler for aura:iteration finished rendering
I've got a long list of items displayed in an aura:iteration and the container div is set to overflow="scroll"
What I want to do is scroll to the bottom of the list when the page loads.
The list data get's pulled in from an Apex query so I've put the "scroll to bottom code" in the callback, but since the aura:iteration hasn't rendered all the list items yet, the listDiv.scrollHeight is zero.
I've also tried putting the scroll to bottom code in the onRender function, but that doesn't work either.
<aura:handler name="render" value="{!this}" action="{!c.onRender}"/>
Is there a way to handle when the aura:iteration has finished rendering all it's dom elements?
What I want to do is scroll to the bottom of the list when the page loads.
The list data get's pulled in from an Apex query so I've put the "scroll to bottom code" in the callback, but since the aura:iteration hasn't rendered all the list items yet, the listDiv.scrollHeight is zero.
I've also tried putting the scroll to bottom code in the onRender function, but that doesn't work either.
<aura:handler name="render" value="{!this}" action="{!c.onRender}"/>
Is there a way to handle when the aura:iteration has finished rendering all it's dom elements?
<aura:component controller="ListController">
<aura:attribute name="list" type="List" />
<aura:handler event="c:updateListEvent" action="{!c.updateList}"/>
<div style="height:200px; overflow:scroll;">
<aura:iteration items="{!v.list}" var="listItem">
<div>{!listItem}</div>
</aura:iteration>
</div>
</aura:component>
({
updateList : function(component) {
var action = component.get("c.getList");
$A.enqueueAction(action);
var self = this;
action.setCallback(this, function(actionResult) {
var list = actionResult.getReturnValue();
component.set("v.list", list);
var listDiv = document.getElementById("listDiv");
listDiv.scrollTop = listDiv.scrollHeight;
});
}
})