Forum Documentation Showcase Pricing Learn more

Move the current cell in the repeating group

#1

I am working on website and i reach to difficult feature where i need to move the text in the repeating group around the image !! How i can move the current cell in the repeating group in the image ? and if that possible how i can save the current position for the movable text in the database ? any plugin or helpful thoughts really appreciated

0 Likes

#2

If I understand you want to resize the repeating group in real time? It might be a little more complicated than you’re anticipating but if I understand what you’re trying to do you can probably do it with this plugin.

If you want my thoughts: that’s going to be a lot more work than changing your UX and building a few extra elements. Is it at all possible to show the image in a popup, or beside the text, etc…?

Anyway if you succeed in moving it let me know. I’d like to see it :slight_smile:

0 Likes

#3

Thanks a lot for your reply and trying to help , actually you are right making things simple is always more clever , but in my case moving the text (Not resize it ) is a game changer to my app and provide main feature to the art work in the app. I have found these 2 resources that may help me but :

1- First Plugin - Fabric JS [ This plugin in not ready yet and still remain some work to accomplish it ]
2- This Plugin from zeroqode : https://zeroqode.com/plugin/image-annotation-1538732397082x262724476753149950 , notice how you can move the pin when click on the " Allow marker position " , but in this plugin moving the repeating group or current cell in the repeating group not working or i can’t implement it correct especially that i am trying to move text in repeating group and not an image !!

0 Likes

#4

Okay. It’s a challenge to help you out without a lot of context, but I’ll keep trying :wink: Can you move the entire repeating group instead of a single element in a single cell? If so, you can probably do something with this:

I stumbled across moving draggable groups (look for drag/drop plugin from bubble) with a workflow action. You could place your repeating group in the draggable group and move the whole thing. I don’t know if that’s your intended behavior. I’m presenting this option because it’s “no code”, but if you want to keep it responsive you may need to set up media queries and use javacript to dynamically move the group. Keep me posted.

0 Likes

#5

Hi , Thanks a lot man for your support and help , actually yes this plugin seems the wanted one , i can now move the "current cell " within the repeating group , however i am facing 2 issues :
1- How i can drop the current cell in the wanted position ? i have tried to make a work flow when i click on the text "current cell " but it didn’t work
2- How i can save this position to the data ? for example if i redirect to final result " in my case i called it design page " [ my point is to make the current cell display on the same position after drop it on the image ] , i will try yo make a custom state ,maybe it will work

0 Likes

#6

Oh good I’m happy we’re getting somewhere :slight_smile:

I think you might be getting the “bT” error because you first built the workflow and then tried to move the element into the repeating group (hereinafter “RG”). I am assuming the reason is that the “parent” or “original” group is now gone on runtime and only exists for bubble to duplicate all of the RG’s cells. I hope that’s clear enough, if not let me know.

Repeating groups are very flexible and super easy for us non-coders to use, but they limit the customization we can get from them. I don’t think you’ll be able to use this method WITHIN the repeating group, which is why I originally suggested you move the ENTIRE repeating group…Alternatively, if you build out individual groups instead of using the RG you’ll have full access to all elements.

  1. Exactly. Store it in a custom state and call it whenever you need it. Alternatively, you can write it to your database, if you need it retrieved on page load. Careful writing to your database is about eleventy times slower than writing to states.

Gl, keep me posted :wink:

0 Likes

#7

Hi , Thanks again … if i understood what you explained , I think yes you are right , it seems moving text that exist in the current cell in the repeating group then drop it on a random position on the image ( outside the current cell ) not possible ! but what if i move the "drag/drop Group " and drop it in the"Drop Area " that exist in the same current cell in the repeating group [ Kindly check the screen shot ] ? I have tried this option but it didn’t work either !

  • Yes i can move the whole repeating group "on the image ,i can consider this as a secondary solution for my case , however i really appreciate if you can explain why i can’t or if it is possible to move group"drag /drop"and drop it inside the "Drop Area " in the same current cell of a repeating group !

    Best Wishes
0 Likes

#8

Make sure that the drag drop group is NOT a child of the drop area and everything should work within the cell, I think. If it doesn’t and you’d like some help troubleshooting, share a sandbox with me and I’ll take a look :slight_smile:

0 Likes

#9

Hi , please take a look : https://searchmyrecipe.bubbleapps.io/version-test?debug_mode=true
Thanks in advance

0 Likes

#10

Yes if you’re comfortable, please share an editor link. It will be easier to see what’s goingon.

If you want to you can send me the link privately.

0 Likes

#11

Oh. You’re trying to leave the text where the user dropped it, but load it that way in your repeating group? With the text in the same place your user moved it?

0 Likes

#12

Yes that’s correct ! please check the editor : https://bubble.is/page?name=index&id=searchmyrecipe&tab=tabs-1

0 Likes

#13

Okay I don’t think I can help you using that plugin. You’re on the forum asking for a custom solution for a complex problem and I don’t know that this is the right medium for you to find it. As I mentioned in the very first post, this is a CSS problem.

You have a set of elements for inputs, and a set of elements for display, which means your drop groups will never “stay” because you’re not actually showing them on “display” with your set up.

What you need to do is actually store relative distances of your elements from your parent border using javascript (look at plugin “toolbox” by mishav). Then you need to apply those same distances from your input element to your display element. I think (I don’t actually know this) that there’s an extra layer of complexity because you’re putting them in a repeating group and therefore you can’t simply assign a unique id to the element.

If you’re dead set on this, you can either spend the time figuring out how to do it with CSS. Depending on your background and financial situation, you may want to hire a developer to help you with this, as what you’re trying to do is complex. Chin up, doable on Bubble (I think), but I’m out of my depth here.

You can alternatively and simply just move the whole RG.

Good luck!

1 Like

#14

Thanks a lot for your support ,i have selected the simplest method as you mentioned ( moving the whole RG ) and it worked fine with me … i will try with some other related plugins and check if it can work , i will keep you update if any progress happen :slightly_smiling_face:

Thanks again ,best of luck

0 Likes

#15

Awesome that that worked out!

0 Likes