Why don't the width of my repeating group cells expand on a wide screen?

I’m trying to build a calendar with a repeating group.

To do that I created a reusable object. And I’m using the Calendar Tool plugin to spit out a list of dates, and I put those inside a repeating group.

It’s a “Full List” repeating group with 7 columns and 6 Rows. See screen here:

But the problem is that when viewed on a large desktop screen the cells do not widen to accomodate the new wide page. Instead it changes the repeating group to be 10 columns. This is messing up my design.

I need it to always stay at 7 columns so that it aligns with the 7 days of the week. The cells should grow wider instead of adding more columns.

I am new to learning about the Bubble responsive engine, so the answer may lie there, but I can’t figure it out.

I have annotated a screenshot here (in red) to show how it looks on the front end:

P.S. I have tried changing the repeating group from “Full List” into “Fixed Number of Cells” and it made no difference.

Try changing the Max width of repeating group to max width of page/7. That should work.

Are you referring to this max width?

Because I can’t change the max width to be less than 100%. It won’t allow me to put in a number less than that.

The reusable element and repeating group both have a width of 1090px. And the width of my actually monitor is 1920px.

I have tried changing that Max Width setting to something larger like 700% but it didn’t do anything.

I’m still struggling with this.

Does anyone else have other ideas that might solve it?

Solved it!

Incase anyone else finds it helpful, I fixed it by doing this:

  1. Made the reusable 1920px
  2. Set a max width of 1920px on a container group that contains everything in the reusable (not the reusable itself).
  3. Design it for that larger screen, and then everything shrinks down correctly. Setting a max width on the container group ensures it won’t go out of alignment on screens larger than 1920px. Anything above 1920px would be a super rare screen size, but you never know.

Hi @Minty,

Anyway you could make a public editor page view to help me out? Trying to do the same, but I’m having trouble getting this to be responsive so that only the 7 columns stretch the page.

I’ve never shared an app before. Hope this works.

Editor: https://bubble.io/page?version=live&type=page&name=index&id=full-screen-calendar&tab=tabs-1

Preview: https://full-screen-calendar.bubbleapps.io/?debug_mode=true

P.S. This example calendar is using the default Calendar Tool plugin. The one I am using on my own app is a modified version that outputs exactly 42 days per repeating group. That will stop the blank days showing at the end of the calendar. I’m not wanting to share plugins on the market place just yet, so you’ll have to make your own version to fix that particular bug. All you have to do is copy the original Calendar Tool plugin into your own plugin, delete the line that says const endDate = moment(properties.month_date).endOf('month').endOf('week')and replace it with const endDate = moment(startDate).add(41,'days'). Then use that modified version in place of the original Calendar Tool.

1 Like