Make a GroupFocus scrollable / dynamically adjust a GroupFocus height?

Hi :wave:

I have a GroupFocus that contains a RepeatingGroup. The list of things the RepeatingGroup displays is potentially very long. Therefore, in some cases, the FocusGroup height becomes greater than the page height and the content becomes inaccessible…

The expected behavior would be for the max height of the FocusGroup to be from the anchor point to the bottom of the page, and then the content would be scrollable, like a page itself (e.g. Trello’s Boards drop-down menu).

Rmi%20%26%20Lucien%20(remilucien)%20_%20Trello

How can I achieve this?

NB: I can’t use a fixed number of cells for the RepeatingGroup because the list of things to display can be as short as 1, so it wouldn’t look good if I define an arbitrary fixed number of cells of 5 or so.

NB2: I can’t use a FloatingGroup instead of the GroupFocus, because my anchor point is an element that can be at any vertical position in the page.

4 Likes

+1 for an answer!

2 Likes

+1 Would be good if it auto adjusted to the screen size.

I accomplished this by using the “run javascript” action (from @mishav’s toolbox plugin) when my GroupFocus element is visible and this code from Benito. Thanks @viably.co!

3 Likes

What kind of visual result is it doing for you @Kfawcett ? It doesn’t work for me, or at least it’s not achieving what I’m looking for (cf. my initial post)… :pensive:

It’s even unnecessarily expanding the height of the floating group, and it’s still longer than the page height.

It could be because my page setup is fairly complex, with lots of stacked invisible groups, with collapsing height… :confused:

I had seen that code snippet but I thought the use case was different. And on that topic, I use a floating group “to both” for my left nav and I don’t have the issue described by @viably.co.

i use @viably.co JS but hidden and other contentt on the page can impact this. As is always the case…copy or create a new page and add elements to identify if any are affecting its use

@Lucien, my use case is slightly different, so you’ll need to tweak the javascript to your needs by getting the various heights of elements and calculating whether to enable the scroll or not. That being said the general steps will allow you to use a Group Focus and add a scroll bar to it.

Like @Bubbleboy mentioned about other content impacting, you’ll notice in the section above the highlighted text I’m getting the height of my header and subtracting that from the height of the window to ensure my GF does not flow past the bottom of the browser window.

I’m doing something else in mine to set the width of the GF based on the right edge of an element on the screen. See the highlighted text in the screenshot.

image

Here’s a demo showing the Group Focus where the height is only as large as the browser window, displaying a vertical scroll bar, and the width going to the edge of an element I defined.

Thanks! And well done! I’ll try that shortly.

Hi Guys, I’m glad the script was useful, judging by the screenshot you’ve shared @Lucien I think this script might work better:

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

function resize() {
    var h = window.innerHeight;
    var topOffset = 86;
    var newHeight = h - topOffset + 'px';
    var dropdownHeight = 520 + topOffset;
    if(dropdownHeight > h) {
        $('#dropdown').css({'height':newHeight, 'overflow-y':'auto'});
    } else {
        $('#dropdown').css({'height': '520px', 'overflow-y':'auto'});
    }

}

resize(); 

I’d also note that any elements that changes height will cause Bubble to recalculate the position of the elements. This is like bubble triggering its own resize(); function which will override the above script.

Therefore if you perform an action that could cause a change in height, you should also trigger the script again. The best way is to have it in a custom workflow so you can trigger it from any other workflow without duplicating the code.

I hope that helps.

2 Likes

Hi @viably.co,

Thanks a lot!

I’m getting there in terms of logic. However, I think I’m still struggling with getting the vertical position of the element, which is not fixed, in order to assess the available height (sorry, this was not obvious on the screenshot, and I realize now, also not obvious on the GIF of my initial post).

The tentative code below is probably more explicit to describe what I’m trying to achieve:

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

function resize() {
    var windowHeight = window.innerHeight;
    var dropdownPosition = Current page scrolling position - 447 + 'px';
    var availableHeight = windowHeight - dropdownPosition + 'px';
    var dropdownHeight = $('#gf-users').height();
    if(dropdownHeight > availableHeight) {
        $('#gf-users').css({'height':availableHeight, 'overflow-y':'auto'});
    } 
}

resize(); 

I’m not sure if my way of retrieving the vertical position is incorrect or if I have some other syntax/logic issue :thinking:

I haven’t tested this, but was trying to think through all of the values you would need. I would trigger it in workflow “when the GF is visible”.

function resize() {
// the current height of the window
var h = window.innerHeight;

// the object to update
var target = $('#gf-users');

// the position of the top of the target obejct
var topOfTarget = target.position().top

// the full height of the target object 
var targetHeight = target.outerHeight;

// the height between the top of the target object and the bottom of the window
var result = h - topOfTarget + 'px';

// the current position of the bottom of the target. So we can see if it's below the bottom of the window and trigger the resize.
var bottomOfTargetPosition = topOfTarget + targetHeight;

// make the GF scrollable and fit within the window if the bottom of it is below the bottom of the screen. 
if(bottomOfTargetPosition > h){	
$('#gf-users').css({'height':result, 'overflow-y':'auto'});
}

resize();

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

Hi Keith,

Thank you so much for looking into this.

I tried your code suggestion, and I triggered it the way you suggested, but unfortunately it doesn’t seem to work :confused:

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();
});

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

Were there any prerequisites to making this work (besides having toolbox)? I’ve been trying and trying and can’t get it.

I’m also curious if anyone has applied to floating groups…

Hi Erick,

No prerequisite, no. The implementation described is for floating groups.

I still have to tweak that code a bit more though, as it seems that it’s not working consistently the first time around when the FG is displayed, but only the second time.

I’ll post the final result here when I’ll have had the time to work on it again.

1 Like

Thanks - I got this method to work for me: Vertical scrolling in a floating group?

This topic was automatically closed after 70 days. New replies are no longer allowed.