Recently, I have been working on an app adapting desktop pages to be responsive. Overall, the process has been progressing well. However, I have encountered a limitation: the offset-left and offset-top positioning properties of groups focus are not currently available for editing through conditional logic. This has forced me to create a separate group focus for mobile devices, which is not ideal from a maintenance perspective, as I now need to edit two elements whenever changes are required. Is there a plan to address this issue, perhaps in the new editor?
You can adjust that with custom css in a seperate html element on the page for example.
Unfortunately this is really bad, I’ve gone through this a few times already.
Being able to adjust the offsets through the HTML there is also quite difficult.
What I ended up doing in my cases was:
Either I used a plugin called group focus realocator
Or I had a reusable, and then I had more than one group focus, but instead of having the things inside duplicated, I used the reusable.
For me the second option worked better as well.
I really hope Bubble will soon add the option to make the group focus offsets dynamic.
In my case, I don’t have the autonomy to create new elements since I’m not the project leader. I’ll need to discuss this with the leader to explore that possibility.
Okay.
You wouldn’t necessarily be creating a new element, you would either be passing it to a reusable or using some script to reallocate the group focus.
@carlovsk.edits what’s bad about custom css?
I have no problem using custom CSS.
How did you change the offset with custom CSS?
When I tried it, it didn’t work very well. Bubble calculates and automatically creates a top and left for that specific group focus.
I can change the top and left of that element via CSS, but it doesn’t work the same as what we set in the Bubble editor.
I made a small example to show:
Don’t use top and left for this (it will conflict with Bubble’s own calculations for positioning the Group Focus).
Instead, use:
transform: translate()
or
transform: translateX() or transform: translateY()
to dynamically change the offset for a GroupFocus (horizontally, vertically, or both).
Here’s an example:
1 Like
Perfect @adamhholmes !
1 Like