Portal page vertical positioning and tabs collapsing

Hi,

I am using the following template, “Portal / Dashboard Page with Icons”.

There are canvas blocks that I have added for each menu item under “Blocks container 860(do not rename)”.

As I keep adding blocks, the vertical positioning is messed up. There is a huge white space that is between the top and the beginning of the block. This varies from tab to tab and is unpredictable. There seems to be no documentation related to this issue. Please guide.

Regards

1 Like

Im not apart of Canvas, but to my understanding, its suppose to be like that with a bunch of ‘spare space’.
When previewing with dummy data it should basically fully compress. For example my main dashboard/portal page is now 28000pixels vertical, but the actual page when loaded (of course not all blocks) is standard height. Using the single page app design, i treat blocks basically like sections to a ‘page’, so only show sections needed and others block/group hieght will compress to nothing when not visable

idk if im on actually right track with what your asking, but took me a bit to learn but when working with now, makes things alot easier imo.

2 Likes

Hi @saurabh,

Ideally, all blocks should be placed into "Blocks container 860(do not rename)” because it contains the responsive settings for all content blocks on the page.

When adding blocks to a page, I would recommend adding all the blocks you need in one go. This is because it gets more difficult for the extension to correctly place the next block if you make any height adjustments to the previous blocks on the page. This is something that we have on our radar to improve.

When you see any big gaps on your Bubble page in preview mode, it usually is because one of the following things:

  1. Check the group’s setting
    The box should be checked for Collapsible this element’s height when hidden
    Screen Shot 2021-02-16 at 12.30.50 AM
  1. Elements or groups are overlapping
    Getting responsiveness right in Bubble is pretty tricky. Even if you’ve completed #1 above, responsiveness still would not work properly if you have another group overlapping with the group you want to hide. This is why we include placeholder groups in all of our page templates and blocks. Instead of moving blocks around or adjusting the main group’s height, you could easily resize the placeholder groups to add more components.

Generally, all blocks should be vertically stacked on top of each other and not overlapping:
Screen Shot 2021-02-16 at 12.43.47 AM

You mentioned that you are using the portal page - I’d check to see if the Group PLACEHOLDER on the page is overlapping with any other elements or components. If yes, you should resize it so it is not overlapping with anything else.

Thanks! Please let me know if you have any other questions.

Thanks to @haydnhinks as well for helping us answer the question :grinning:

1 Like

Thanks for your reply!

I tried vertical stacking. It works, but not consistently.

The only way I was able to resolve the issue predictably, is by adjusting the Y value for the group. They appear overlapping in the bubble designer, but I can hide all others and make visible the one that I am working on, to make it easy.

Also, is there a recommended position for the group PLACEHOLDER? I see that it should not overlap other groups. Can it be placed at the bottom? Can I resize it to make it very small? Will it affect anything else?

1 Like

Thanks. It took me some time to figure that out as well.

1 Like

Hi @saurabh

I would recommend placing the placeholder group at the bottom of your content - so at the bottom of your block or page. That way, you can easily resize the placeholder group without needing to change and resize the height of the block/page.

Yes, you can resize it to make it very small and it won’t affect anything else (as long as it is not overlapping with other groups).

1 Like

I am doing this group stacking on the portal page, but the page height isn’t collapsing.
Is there anything else we need to change on this page? E.g. the height of the Blocks Container 860? The side tabs? The group main page content?

I have stacked all the groups inside the Blocks Container 860 on top of each other, everything works fine, but the page height still doesn’t collapse…

Hi @dann9 !

Sometimes it comes down to one hard to find group that is overlaid on top of others that is causing the problem.

Just go through all of them using the element tree and you will find likely find the pesky one.

Ok I’ll check them :+1:

But say if all the stacked groups total height is 100,000 should the Blocks Container 860 block be changed to be this height as well?
Also should the the other portal blocks such as the tabs, which is set at 8330, also be lengthened to 100,000 as well?

Currently I’ve left these alone at their original heights.

@dann9

That is the problem.

Vertical distance is not being managed if you let the children have longer heights than it’s parents. :grimacing:

1 Like

Thanks for your help @cmarchan, it’s all working now!

1 Like