It would be great to get a simple checkbox to allow us to choose to add a scrollbar to the groupfocus element instead of having it automatically expand to fit the content inside.
I was reading through the forum and found a post from a few months back asking for the same thing…and unfortunately the only solutions require code, which in a no-code environment is not ideal.
I am hoping some people from that now closed thread ( another idea is to not close threads so that they stay alive and are continuously able to be replied to )
I am wondering if any of you would know how to do such a thing.
I only want to to be able to set the groupfocus element which has a group element inside containing the results of a search to become scrollable. I want to set the height in my editor and do not want it to be the full height of the page.
I have been able to set a scrollbar to appear on a group on the page, but unable to set a scrollbar on the group when it is in a groupfocus or set a scrollbar onto the groupfocus itself.
I actually just tested this again by pressing my button a second time ( this button runs the javascript after the groupfocus becomes visible ) and it works.
I ended up adding a pause in the workflow between showing the groupfocus and adding the scrollbar.
One problem with this though is that I am applying this function to a search results page. Basically an input is used to type in the search parameter and the user is able to see the groupfocus and search results as they type and the results adjust based on the inputs value. I am using the search & autocomplete plugin for this to work.
The issue is that when a user first gets some results back and the groupfocus is displayed with a scrollbar and then the user adds more characters to the input value the groupfocus loses the scrollbar…I believe this is a known issue with using JS in bubble as it requires you to run a workflow for the JS every time something changes on page.
I am wondering if perhaps there is a CSS or html code that could be used to set the scrollbar onto the groupfocus element so that once it is applied it stays there as long as the groupfocus is visible.
At this point I am unable to run the JS based on the inputs number of characters and constantly lose the scrollbar as the inputs value is adjusted as the groupfocus is visible.
UPDATE
I have been playing with the CSS tools plugin and have some progress, but with every step forward using code on bubble you have to take five steps to the left, one back, five right to find yourself in the same position with a different problem
I posted another thread on the subject of CSS tools for adding a scrollbar
UPDATE2
Trying to use HTML doesn’t allow the groupfocus element or the group element inside to change height according to the settings either for some reason.
Hi, I checked out your example and it looks like you have it working. I would suggest however not to run the javascript on click after a delay but to add a “do when condition is true” workflow and set it to run every time the group focus is visible. Using this method there is still a short visible resize but it’s almost instant. I hope that helps.
It looks like you’ve also go the group to scroll, so I don’t know if you need further help.
Actually I am still having problems with getting it to work as I would hope to.
I have the groupfocus getting the scrollbar but this is for a search results display. The groupfocus is set to be shown when the user has entered some value into an input element. The search results that are contained in the groupfocus are utilizing the autosearch plugin.
So when a user searches and stops typing to hover over the search results and then resumes typing presumably to add more words, or continue spelling a single word in entirety, the groupfocus which remains visible, has the JS “undone”.
I’ve tried your suggestion of doing a condition when true for when groupfocus is visible but it doesn’t work.
I’ve tried using HTML but the groupfocus doesn’t get its height adjusted to the code, and only has a scrollbar placed onto it ( which doesn’t do anything since the groupfocus expands in height to fit the search results )
I also tried CSS tools but to get the groupfocus to keep it’s height and not expand its height to fit the results I needed to use the “resize overtime” feature of CSS tools which for some reason moves the entire page to the left and leaves the groupfocus drifting off in space on its own.
Strange thing about the CSS move is that when I trigger the workflow again, the groupfocus is repositioned to its anchor element again ( which was already moved when the entire page moved )
Haven’t been able to get any of the three code options to work properly, and there seems to be no no-code option.
