Repeating group to display available units (properties) in a building

The problem statement: I need to be able to showcase a building visually with multiple floors and multiple units on each floor.

I am using a repeating group (one for floors) inside a repeating group (one for the units on that floor). And it currently looks like this.
Screenshot 2020-04-03 at 9.14.27 AM

I want the width of the repeating group to not show the whitespace, wrap around the content it has and also be centred on the page. What’s a solution or possible workarounds? The issue is that the units on each floor are dynamic and buildings can have between 4 to 20 units on a floor

Would deeply appreciate some help asap as I have a demo in 2-3 days and lot of ground to cover.

My settings for the repeating groups:

Could you use a repeating group with 1 row and 1 column using a Full List. Then untick the fixed width setting, and tick the show multiple columns on a row if stretched column.

The trick then is to make the RG just fractionally larger than the cell contents.

As for centring can you not center the RG in the responsive tab?

I’m not certain if this will work for you but I think it will take you a ways towards what you are looking for. You may need to compromise a little!!!

Didn’t work unfortunately. The elements inside start stacking up horizontally which I don’t want :frowning:

Set the max width of the group to only allow x items across. Or if you want to list vertically before listing horizontally I know I did that somewhere on the forum in the past. Otherwise you will need to be a little more explicit in your description and drawings of the two lists and exactly how/where one fits into the other. Could you dummy something up with fake images in a way that would help is to help you better?

I did try that and at this point I’m really just banging my head against the wall trying to figure this out. Your help would be really appreciate.

I have cloned this from my application. I returned it back to what I had original as the changes had become quite messy.

so you can see a preview here: https://building-101.bubbleapps.io/?debug_mode=true

Hope this gives a better idea!

All I see is a white page with grey blocks. It does nothing. What am I supposed to see?

It doesn’t do anything. The problem is not with adding more functionality.

I want the width of the outer repeating block to be dynamic to fit the content inside.

What I’m creating is an inventory management app for real estate. Out of which one part is showing a real time view of the inventory.

Right now the width of the repeating block is fixed so when there are less no of units (grey blocks) there’s a lot of white space. When there are more units, it flows horizontal. Did you see the app over here? It is linked to db which has floors and units.

https://bubble.io/page?type=page&name=index&id=building-101&tab=tabs-1

I wouldn’t know how many units are there on each floor before hand. My end-design would look like this:

I guess I wasn’t clearer in my earlier messages.

Sorry I missed the editor link the last time… Doh!!!

The example helps. If I understand it correctly, the vertical list is the floors in a property, so each row is a floor. The horizontal list inside a row is the units in on a floor, so each colour block is a unit.

Earlier you said

I want the width of the repeating group to not show the whitespace, wrap around the content it has and also be centred on the page.

But your end-design seems to show the whole thing, and the units within (coloured blocks) as left-aligned not centred. Can you clarify this, please? And explain what you meant by not wanting the white space too.

Is it that you want rows to only be the same length as the number of blocks? Or something else entirely and why does this matter, do you expect some to be short and others to be very long? If I can grasp this then I understand completely (I think).

Yes, your understanding is correct - the vertical list are the floors and the colour blocks are the units on each floor.

The thing is I don’t know whether there are going to be 4 units or 20 units on a floor. So I can’t set the width of the outer repeating group for either 4 or even 20 in the editor.

I want the repeating group width to be set to length of the maximum number of blocks. For example in the coloured building example in my last message, some floors have 8 blocks, 6 block and 5 blocks so I want the width of RG to be set to the length of 8 blocks.

Left alignment of the blocks within the group is ok. I want the RG to be centred on the page, but that’s a simpler problem I guess. Does that help?

Great. I have an idea of how to go about it. Back to you later once I get what I’m trying to finish finished.

I’m looking at your Data Tables and I have a few questions:

Property has no link to Floors or Units so how do you know which belong to a particular Property? You surely need at least a list of Floors.

Floor has a link to Units (List of Units) which I take to be an instance of one floor in one building and not the 1st floor in every building.

Units has a link to Floor (List of Floors) - meaning one Unit can be on multiple floors so a particular instance of a Unit could be on more than one floor in the same building and could be on floors in different buildings.

Can you clear this up for me please because we might need to revisit your data table structure before we can proceed with a solution.

Yes, you’re correct. Property will need a list of floors. However, I did not create it for this example, since we don’t have two properties. We can assume that all floors in the same property and things should work as it would if we linked it to a property.

Hope that clears it up! Appreciate your help :slight_smile:

1 Like
  1. I believe what you are asking for is that the width of the RG is only as wide as it needs to be to cater to the largest number of units on a floor. You don’t want an RG that can hold 100 units wide when most will have less. So if the maximum number of units is 10 then you want it ten wide and the space for the other 90 off to the right would disappear. Am I correct?

  2. And would you accept that the user would have to scroll the screen right to see all the units if there are a lot of units on a floor?

  1. Correct
  2. It is acceptable that if there are more than 20 units on one floor, then the user has to scroll to the right to see all. But if it’s less than 20, they shouldn’t have to and the width of RG should only be as wide as it needs to be.

Ok. That’s easier than I thought but you are probably not going to like the solution. It is however the only way to do it in vanilla bubble I’m afraid.

You have to have a series of RGs of different widths and you only display the one you need so only one is visible at any point in time. You will have to pick the right width RG for both the floor and the right Width RG for units based on number of units.

To do that you need to get count of units on each floor and then use the max count to select the correct RGs. Are you Ok to do that yourself or do I need to think it out for you from your dB Structure? Perhaps you would like to build the RGs first and try it and reach out for help again if you get stuck. I’m around all weekend and will check in on the forum occasionally because I know you have a deadline.

——————

Something else you might wish to do is to post another post on the forum titled “I need dynamic/variable width RG/List - is it possible?” Because someone might have written a plug-in or code for themselves and can share it. I doubt It but you never know. Using a title they immediately understand is more likely to elicit responses than explaining your app which just adds to the cognitive load of your question.

In the body of the post say that you have a vertical RG/list of Property Floors and the RG is one cell wide.

Say that inside each Floor cell is another RG that is a horizontal list of Property Units with a variable number of units and that your clients constraint is that Units must not wrap so the screen must scroll right/left as far as is required to display them all but no wider than necessary. Say it can not be a fixed width RG with a horizontal scroll bar.

It would be worth a try but don’t rely on it, do it in parallel with a solution in vanilla Bubble.

Thanks, I understood the solution and thank you for spending the time to come up with the solution. Yes, it seems like it should work.

Regarding another post, yes that’s a great idea and makes total sense. I should’ve given more thought to how I framed the post’s title and body. Will try that too! Thanks a lot.

And remember I’m here all weekend, thank you Covid, so please reach out if you get stuck again. I’ve been there many times myself and still experience it occasionally and it’s no fun.

I had a thought @praneet1 Right now you probably need to focus on getting something working for your demo but if it goes well, you should look into the bubble plugins. There are lots of plugins for images and one of them might work for you. If you search for “Image Gallery” and/or “Pinterest” you should get a free hits. Maybe not perfect but certainly more powerful and prettier than the standard Bubble RG approach.

Yes, the demo is almost ready. Working the finishing touches. Kept the number of units fixed for now. Will figure out the long-term solution later. Thanks for the tip on the images, will check it out too!

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