Make GroupFocus scrollable and adjust height to match child group

[noyourbroker]

Hi all, I have a series of cascading drop-down menus (groups) contained within a groupfocus (GF) - screenshots below. The groups are 40px high when contracted, and much longer than the page when the most detailed topics are expanded. How might I constrain the height of my GF element so that it is never longer than the child group, and do both of a) set a maximum for the GF’s height at the bottom of the window/viewport when the contents are expanded and b) make the GF contents scroll when the GF has its height set because it has hit the height maximum (a).

Below is the code I have so far, I tried to utilise the discussion at this link where applicable but my JS skills are fairly novice and couldn’t figure it out.

Make a GroupFocus scrollable / dynamically adjust a GroupFocus height?

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 heig…

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

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

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

}
    
resize();

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

Here are some screenshots:
example of the GF overrunning the page:

example of GF contracted, but with the GF element being too long as it is not resized to the child group:

Thanks for taking the time to read/help,

Chris