Trying to get a better understanding of how plugins works in bubble.
My goal is to build something like this in the bubble app:
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.)
What steps am I missing in order to make this element visable inside the bubble group?
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
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?
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
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.
