Update layout on expand content within frame

[jmerrikin]

My wookmark layout is mostly text, data grids, and charts. In some "frames" I have a link at the bottom which shows/hides content from a hidden div. The initial state is of the hidden content is hidden. When I click the link to expose or hide the hidden information, I need the height of the box to grow accordingly and to recalculate the overall layout since some of this hidden content can be very tall. Is there any way to accomplish this easily on my click event?

[jmerrikin]

Here is my main.js where I call the function. When I click the link to expose new content the height adjusts correctly now however, the overall layout arrangement does not adjust and it should adjust the same way as it does when I drag the window larger or smaller.

require(['views/asset-allocation-view'], function _main(AssetAllocationView) { 'use strict'

$(document).ready(function _onDocumentReady() {
    $('#card-layout--cards').imagesLoaded(function () {
        // Prepare layout options.
        var options = {
            //itemWidth: 320, // Optional min width of a grid item
            autoResize: true, // This will auto-update the layout when the browser window is resized.
            container: $('#card-layout--cards'), // Optional, used for some extra CSS styling
            offset: 17, // Optional, the distance between grid items
            flexibleWidth: 440 // Optional, the maximum width of a grid item
        };

        // Get a reference to your grid items.
        var handler = $('#card-layout--cards li');

        // Call the layout function.
        var $masonry = handler.wookmark(options);

        var AssetAllocationComponentView = new AssetAllocationView({ el: $('#card-1') });
        AssetAllocationComponentView.render();
        handler.trigger('refreshWookmark');

        $('#card-layout--cards a').on('click', function () {
            handler.trigger('refreshWookmark');
        });
    });
});

});

[Sebobo]

Hi,

I think your trigger the refresh to early. You have to wait for the content expansion to finish and trigger the refresh in it's callback. Or set a timeout and wait a few ms.

Regards