Simple plugin with a 100%-height div and how to place it inside a Bubble group?

Plugin builders
1

Trying to get a better understanding of how plugins works in bubble.
My goal is to build something like this in the bubble app:

div100
div100836×477 91.8 KB

Outer group and div height depends on the height of the repeating group.

A repeating group is placed inside a group that is set to collapse its height when hidden. Next to the repeating group is a plugin(visual element) that contains a custom div that is set to full height in percent.
Element code: < div style=“background-color:#272727;position:absolute;width:60px;height:100%;”>< /div >
No bubble properties are selected.

I added the plugin element inside the outer group. But in preview, the div is placed after the body-tag, (and before the bubble main-page.)

10
10686×596 97.3 KB

What steps am I missing in order to make this element visable inside the bubble group?

2

Use the hero element in this plug-in

Then you will need some CSS changes and a bit of workflows to re-adjust the repeating group

3

Thanks,

Correct me if I am wrong, but doesn´t the Hero-element change a groups height in relative to viewport? I am looking to change the group/div height in relative to the parent group height. I don’t see why I would need to refer to the viewport height?

4

Just place the element in the inner group. If I misunderstood reach out in a private message maybe I can help as I am always looking for ways to improve the plug-in

5

This script achieves the same goal.

document.getElementById("ID").style.height = "100%" ;
//Changes bubble group element

document.getElementById("ID").parentElement.style.height = "100%";
//Changes bubble r-box

However, it would still be better for performance to have a special div as a “real” child of the outer group.