Make a GroupFocus scrollable / dynamically adjust a GroupFocus height?

Idea
13

For anyone running into this issue in the future, @viably.co figured out a smart and robust approach, that makes sure the dropdown doesn’t get higher than the container (#g-report-main in this example) or the page itself. Thank you also @Kfawcett for pointing us in the right direction.

Here is the final code snippet:

function resize() {
    // the current height of the window
    var h = window.innerHeight;
    
    // the object to update
    var target = $('#gf-users');

    // the full height of the target object 
    var targetHeight = target.innerHeight();

    // parent group
    var parentGroup = $('#g-report-main');
    
    // the full height of the target object 
    var parentGroupHeight = parentGroup.outerHeight();
    
    var newHeight = parentGroupHeight - 42 + "px";
    console.log("targetHeight = " + targetHeight);
    console.log("parentGroupHeight = " + parentGroupHeight);
    console.log("new height = " + newHeight);
    
    // make the GF scrollable if it's larger than the window height or if it's larger than the parent group height. 
    if( targetHeight > h ){	
        newHeight = h - 42 + "px";
        target.css({'height':newHeight, 'overflow-y':'auto'});
    } else if (targetHeight > parentGroupHeight && targetHeight < h) {
        newHeight = parentGroupHeight - 42 + "px";
        target.css({'height':newHeight, 'overflow-y':'auto'});
    }

}
    
resize();

$(window).resize(function() {
    resize();
});

image
image2022×1048 164 KB

Nb: the value 42 is jut arbitrary, it’s about the right offset for my design (and the answer to life, the universe and everything :nerd_face:).

9 Likes