Where to place a reusable workflow element?

Years ago I built a reusable element containing workflows. It is not intended to be visible. Fumbling as I learned Bubble, I understood that the element could not be made invisible. I could make its background style None, but it still took up space, so I decided to give it a color and hide it. Completely ignoring any attempts to make my pages responsive, I simply placed the element somewhere near the center of the page and covered it with other visible elements. It never felt right, but it worked.

Now I am learning how to use the new responsive engine.

When I placed the workflow element on the page (a Row layout), it shifted other elements to the right. This messed up the page.
Next, I placed it at the bottom of a Column layout container. This works, but feels really clumsy.

What really is the best practice for creating a reusable workflow-only element and placing it on a page, especially in light of the new responsive engine?

Just put the element in a group on each page and give that group an element ID. Then go to your Settings > SEO/metatags and add this css to the “script in body” section
<style>
#nameGivenToElement {
display: none;
}
</style>

Display:none means that the element in question will not appear on the page at all (although you can still interact with it through the dom, i.e. workflows)

1 Like

Also from some testing we have done it seems that the simplest solution would be to use Align To Parent as as the container type and make sure it is not nested in any group other than the page. Then just pick a corner for it to sit and it will not disrupt any other elements display.

Hi @laurence,

I have no idea if it’s “best practice”, but I’ve always used negative margins for headless plugins, HTML elements containing scripts or styles, etc.

I just make the element fixed width and height (the actual dimensions don’t matter) and then place the element at the root level of the page and use a negative top and/or left margin of that same amount. It has always worked without issue for me.

So if I make the element 50x50 and the page is set to column layout, then I place the element at the page root and set its top margin to “-50”. Negative margins are your friend.

:slightly_smiling_face:

2 Likes

Thanks, Will.

I have this bookmarked.

Having started with Bubble nearly five years ago because of the no-code promise, I’ve avoided getting into CSS and other code-like techniques. I did a lot of code in 30+ years as a programmer, including CSS when it was brand new.

I believe at some point it will become impossible for me to avoid learning how to use CSS at a minimum to make things look right. In the meantime I found that @sudsy’s technique of using a negative margin allowed me to move forward.

Thanks for providing something to refer to when I’m ready for some CSS.

:slight_smile:

1 Like

Thanks, Steve.

Worked like a champ, and I’ll be tucking away Will’s CSS technique for the future.

1 Like

Also, just FYI… You probably figured it out, but I neglected to mention that not only is the element at the root of the hierarchy, but I also generally make it the first item in the hierarchy (Make first button from Layout tab) so that it doesn’t interfere with the page layout.

Anyway, glad it helped.

2 Likes