Please help - Centre contents of Horizontal Repeating Group :)

Need help
1

Hi, I’d like to add a horizontal repeating group like this. I’d like to offer the user the ability to add 1 - 5 social icons to their profile.

The nuance, I’d like the group of these icons to be always be centred on their profile. For example, if you only link one social profile, the icon will be directly in the centre, if you link two social profiles, they’ll be centred on the page etc. I want to avoid it showing from left to right (ie. 1 available item in the list shouldn’t populate from far left or far right).

Thanks

2

Exaxmple of somebody with 4 social profiles - If they chose only chose three profiles, the middle one would be directly in the centre of the screen. image

3

Anybody?

4

Sorry it took so long, I had to do this in between sessions. :blush:

This should work for you:

Editor: https://bubble.io/page?type=page&name=social_media_icons_center&id=805testapp42&tab=tabs-1

Preview: https://805testapp42.bubbleapps.io/version-test/social_media_icons_center?debug_mode=true

Hope that helps! :blush:

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

  • One-on-One Tutoring
  • eLearning Hub
  • Video Tutorials
  • No-Code Classes
5

Hi @J805, How would with work with the following though:

User can choose from 10 Social Profiles.
I have Social Profile Entry which the user can have max 5 of.
I then have Social Platform which is a data object i use for Icon, & colour.

The repeating group is a Number type so how would I pull through the Colour, Icon and Hyperlink from the Social Profile Entry?

Similarly, the count of social profiles is based on how many Social Profile Entry’s they have in the list on their profile… ANy clues? Thanks

6

Hi @J805- When I scroll with my trackpad it shifts them all - not sure that’d be acceptable from a UX perspective. Any ideas?

7

hey👋 @cornelius.de.jongh

So for your example you would put actual data in your repeating group. The number type is just fake data I put in to show that it works.

For the repeating group just make it your ‘social profile type’ and display this list of ‘social profiles’ in the user’s list.

Does the list still shift when using the trackpad on my example? I don’t see it shifting at all so I am not sure what you are seeing. Maybe post a screencast?

Let me know. :blush:

8

@J805 - you have to scroll with your house or finger on the repeating group itself. Hold your cursor over the group and swipe to the side.

1 Like
9

I’m on a Mac with a trackpad and it doesn’t scroll for me. Can you show me on a screen recording? It would help a lot to see what is going on. :blush:

10

11

So weird. I wonder if that only happens when you change it from a higher number to a lower number. It might still work fine for your situation. Let me test something.

12

Can you test if it scrolls now when I set it to 3. Does it still scroll?

13

Yes it still moves, need a video?

14

I see it now. Hmm. I wonder if there is a way to fix that somehow. It’s funny how it works visually but then it can be changed for some reason. Let me troubleshoot.

15

Well, I couldn’t do it with code, so I had to do it the long way, but it should work the way you want it now. It’s a lame work around but it works. I tried. :man_shrugging: Take a look: https://805testapp42.bubbleapps.io/version-test/social_media_icons_center

If anyone has a fix to the code part they can post it here. :blush:

16

The good thing is that it isn’t buggy on my phone which is the primary source for people.

17

Do you have a URL to the version in the old method. I’m going to check whether it is buggy on an iPhone

18

This topic was automatically closed after 70 days. New replies are no longer allowed.