Page length same as group length (How?)

[phuthi]

Hi community,

I need some assistance. I have a page with two groups on it. One group has content that is longer than the first groups content. Based on conditions, I hide one group and reveal the other and vise versa. I find however that the length of the page will always be the length of the content that is longer even though it is hidden. This then gives the appearance that there is a lot of blank space at the end when I reveal the group with shorter content. How can I make the page length the same as the content that is currently showing?

Please assist.

Thanks and regards,

Phuthi

[skylershelton]

Try “Collapse this element’s height when hidden” checkbox below the elements dimensions settings on the floating property editor

[phuthi]

I tried doing this however I find that the height for the page does not allow to be dynamically set to be in line with the length of the group that is on it. Can the height of the page be set dynamically?

[skylershelton]

Is your meaning can the height of the page expand and collapse alongside groups expanding and collapsing? If so, afaik that’s not possible.

If you link your app, or recreate what you’re experiencing problems with and link that app, that’s the best way to troubleshoot these types of problems.

[phuthi]

Yes am trying to do exactly that. I have one page and a number of groups on that page. I know I can resolve this by using different pages however that will be a lot of work.

To see an example of the problem go to this website:

link is “www.clarityx.manergy.co.za”
username is "[email protected]"
password is “Password1”. Compare links “Executive Summary” and “Media Groups”. The executive summary page goes on way after the end of the group. This is because of “Media Groups” which is longer. Collaping this when hidden doesn’t quite work.

[skylershelton]

I believe I see what you’re trying to achieve…you’d like to keep the sidebar navigation while being able to display the content of each of it’s selections while keeping it on the same page (as in, not requiring navigation to a completely new page) without that extra space a collapsed group is forcing?

Try stacking the groups on top of each other, displaying on page load the first group in your side navigation. the rest, hide on page load. then in workflows, add element action toggle to start displaying groups for each of the groups to display as needed.

due to each group varying slightly in size, you’d have to leave enough space for the highest of the groups, but it might eliminate some of that extra white space.

without access to your actual app, or a recreated example, I’m not able to actually experiment with it to attempt a more detailed solution

[phuthi]

Yes that is exactly what I’m trying to achieve. I will try the suggestion and if it doesn’t work will recreate an example provide for further discussion. Thanks for your help.

[skylershelton]

I hope it works for you.

Very nice looking app, by the way!

[phuthi]

Thank you!

[phuthi]

Yep, i tried the toggle functionality however am not getting the desired results. i have recreated the problem. sample is at this link https://bubble.io/page?type=page&name=index&id=samples&tab=tabs-1

i would appreciate further comments om this. thanks

[skylershelton]

I can’t really come up with a good solution without a page reload…I’m not super familiar with the other group elements, the answer might lay there. Or possibly making the content of the text you want shown displayed within an Extended Repeating Group?

Sorry I can’t be of more help

[fayewatson]

I think the way to achieve this would be to make the content within the longer group dynamic, and keep the element heights very short. The text element heights will expand automatically, which will also make the group expand, as long as the text content is dynamic. This way you’ll be able to keep the sizing of the group itself and those text elements to be very small within the editor, and on page load, and only have the group increase the scroll when the group is visible. Similar to what Skyler mentioned, this could be done in a regular group or a repeating group. But the only way I can think of is to use dynamic content (creating a Thing, with fields, and a data entry) just for the longer group, even if it’s only for this purpose.

So in the editor, it’d look like this (the green is what you need, also this image is zoomed out a lot just to show the groups are the same height)

And in preview it will expand as needed:

1. On page load (shorter scroll bar):

2. When groups are shown (longer scroll):

Editor:

Bubble Editor - samples

Preview:

https://samples.bubbleapps.io/version-test/clone2

[phuthi]

I think I will end up having to break up the groups into same sized groups. The simplest option that would make this a very easy exercise is if one could dynamically set the page length. I wonder why this option is not available.

Thank you Skyler and Faye for your valued inputs.

[skylershelton]

@fayewatson Yup that’s the solution, very nice.

@phuthi It seems a little complicated but it’s actually a really elegant fix

the group element

the text element

creating group’s text content

what the content looks like as a thing

[darren.james7518]

@fayewatson

The text element heights will expand automatically, which will also make the group expand

This works if you are only using text, but if your page has buttons and RG’s and different elements then there isn’t a way to achieve this. I wish the main page (which hosts all the groups) could shrink to fit the size of whichever group is currently visible.