Repeating group left to right display

Need help Responsiveness
1

I can’t seem to get the repeating elements next to eachother. The only way I get it working is by setting the width to: fixed width which I absolutely don’t want because of responsiveness.

How it looks in editor:

1
11058×592 31.8 KB

How it looks in preview mode:

2
21033×533 20.4 KB

EDITOR pmfproject | Bubble Editor

2

Have you tried grouping everything in the cell and setting it to fixed width? Or is that what you were talking about earlier

3

yea because if it’s fixed width the responsiveness is lost…

4

hi, have you seen this?

I have issue with this subject so i hide/display different rgs dependant on screen width.

5

Well I can create 3 different sections next to eachother, didnt expect that…

6

Responsiveness issues are hardest to help without seeing the app itself.

If you can’t figure it out on your own, please upload a preview of your editor.

7

Not sure if it’s an option for you, but have you considered a horizontally-scrolling single row instead?

8
9

Can you add three different projects so we can see how it looks?

10

sure please see test-page and as you can see they all align below eachother. I found a fix by making the repeeating group fixed width and setting the inner content to responsive, but I feel like that is not a proper solution?

11

I have another app where I don’t need to set the fixed width and it does what it’s supposed to do. You can view it here https://bubble.io/page?name=index&id=maxtrada&tab=tabs-1

12

@nocodeventure: To achieve what you want to do, try this.

  1. Change the no. of columns in the repeating group to 1.
  2. You will then get the option Allow more than one column when stretched. Enable that.
  3. Change the width of the repeating group to 350.
  4. Now if the page is stretched, you will get the second Project horizontally besides the first one. If the page is not wide enough, you will see them one below the other.

You might need to play around a little with the width settings on the inner cell group and the repeating group to make it work as you want.

If you still have issues, let me know, and I’ll share some screenshots by re-creating this on a demo app.

13

I did what you adviced and set it to width 350px for the repeating group but does not do as expected. When I have vertical scrolling it does give me projects under it, I also set maximum width for the group…

14

I started digging deeper on your setup and tried to replicate the same again manually on a different app to see if I could narrow down the issue.

Strangely, on your page, The right margin is somehow getting squeezed.

Responsive-Issue
Responsive-Issue879×547 34.4 KB

When I tried the same, I never run into the issue and it is 0 always.

Maybe that’s why you are seeing the issue. I just proposed a different way to do the same thing earlier, but looks like the current way should also work. Just not able to pin-point the reason why the Right Margin is -20px in your case.

15

I cant seem to get it working even on fresh page. Can I get a preview of your editor page where you re-created this? Thanks in advance.

16

Here you go:

Demo link: https://simpledesign.bubbleapps.io/version-test/test

Editor: https://bubble.io/page?type=page&name=test&id=simpledesign&tab=tabs-1

17

Tried the same without luck. :frowning:

18

What would be the best solution to show all created tasks on the dashboard without filling up the entire editor space? I guess creating a 1:1 repeating group and allowing more than one column, but that doesn’t work?

19

I solved the issue by removing the html element inside the left menu, the support team from bubble said that in a reply:

message from bubble:

Thanks for following up. There is an HTML element on the dashboard page. If you use the element search tool and type html then you will find it. I created a test page on your app and was able to get a repeating group to operate normally as intended. I’ve left the page for demonstration purposes; you can delete when necessary.

Thanks for reaching out. Sorry you’re hitting an issue here, but happy to help. Also, thanks for posting to the forum.

Custom HTML elements can have an impact on how core features operate and animations can unfortunately have similar ill effects.

Have you tried rebuilding the repeating group from scratch without these things? Also, please note that you should do so with ext. vertical scroll or vertical scroll. I copied the page and did those two things and was able to make it work. Let me know if that helps…

20

Thanks for reaching out. This issue seems to be related to similar reports with ‘Animate the collapse operation’. Please uncheck it for an immediate workaround. Our engineers will likely a push a fix in the coming weeks but we cannot guarantee a timeline. Let us know if you have additional questions.

Problem will be solved :slight_smile: