1

I have a component that toggles between displaying a list of items and a selected item.

When a user selects an item we hide the list and display the selected item at the top of the component.

The change over works fine when the user selects items near the top.

Working example

However when a user scrolls down the list and selects an item it appears that the component has broken. It seems that the component resizes and the scroller doesn't know how to correct itself until the user tries to scroll.

Broken Example

My sample code:

Sample.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
    <aura:attribute name="selectedItem" type="String" />
    <div>
        <div aura:id="listContainer" id="listContainer">
            <aura:iteration items="1,2,3,4,5,6,7,8,9,10" var="item">
                <div>
                    <ui:button press="{!c.toggleView}" label="{! 'Item ' + item }"/>
                </div>
            </aura:iteration>
        </div>
        <div aura:id="selectedContainer" id="selectedContainer" class="hide">
            <div>
                <h1>{! v.selectedItem}</h1>
                <ui:button press="{!c.toggleView}" label="Back"/>           
            </div>
        </div>
    </div>
</aura:component>

SampleController.js

({
    toggleView : function(component, event, helper) {
        var source = event.getSource(),
            label = source.get("v.label"),
            selectedContainer = component.find('selectedContainer'),
            listContainer = component.find('listContainer');

        component.set("v.selectedItem", label);

        $A.util.toggleClass(selectedContainer, 'hide');
        $A.util.toggleClass(listContainer, 'hide');

        $A.get('e.ui:updateSize').fire();
    }
})

Sample.css

.THIS div {
    border: 1px #AFAFAF;
    border-radius: 10px;
}
.THIS #selectedContainer div {
    background-color: #BFACE0;
    height: 200px;
    padding: 10px;
    margin: 10px;
}

.THIS #listContainer div {
    background-color: #8BB8B9;
    height: 200px;
    padding: 10px;
    margin: 10px;
}

.THIS #listContainer div:nth-child(2n+0) {
    background-color: #E5EEEF;
}

.THIS .hide {
    display: none;
}
3
0

First workaround: Put sample component inside the ui:scroller lightning tag and use scrollTo('Top',0,0); method of ui:scoller in doinit method.

Second workaround: Use navigateToComponent it will automatically take to top of child component.

Not the answer you're looking for? Browse other questions tagged or ask your own question.