How do show an empty cell + whole list in a RG?

How do you display an empty cell in additional to the whole list in a RG?

1

Here is a quick sample. I have 2 groups in the cell of a RG. The 1st group is the “empty” item and the 2nd group is the regular item. The 1st cell will show both groups. Other cells will only show the 2nd group. But Bubble shows the width of the cell for both groups. What can I do so the other cells do not expand? Cell #2 3 4 5 etc need to stay the same width as group 2 in the 1st cell. But it seems that cell width is fixed to the max of any cell.

2

I tried to get the 1st item and merge with the whole list, so there will be 2x1st item and the 1st item will be used to show “new”. But the merge doesn’t allow duplicated items. So that option is out.

I can use the ListShifterW to get a list of numbers (1 + RG’s list). But the plugin is no longer free. It is an option. I want to see if there is a way to do it in native Bubble way. Any suggestion?

Hi there, I think what you’re looking to do is make sure each cell 's dimensions only expand for the visible group, correct? If so, I’d recommend hiding the group when it is empty (i.e. ‘When this group Is Empty, this group is not visible’ and choosing ‘Collapse when hidden’ on the group’s layout properties. The collapse action is what prevents a not visible (hidden) group from taking up space.

@msgiblin The 1st group (new group) has the collapse when hidden checked and visible on page load off, with a condition to be visible when index = 1. So for index=2+ (cell 2, 3, …), the 1st group doesn’t show and is supposed to be collapsed, but it is not.

I even put a condition on the cell group that sets the max width to be 50% when index=2+. This is how it looks. That is why I conclude that it seems a invisible cell width is fixed to the max of any cell.

1

With some certain layout, it is possible. See below:
image
chrome_tVqMhNOGeU

There are two groups in each cell, the first group is invisible of course, just to make it visible in the first row.
All the rest is the same.

image

I am sure some groups can be eliminated. I add the innermost groups just to add the borders visually nice for example.

But the data source is still same, no trickery there.
image

Check the editor for more details:

1 Like

So the key is to use the “wrapped horizontally” on the RG. That definitely solves the problem. Thanks!

It rises another issue. The column gap is fixed, so when the window shrinks, there will be a right margin. It needs more conditions to make the reponsive looks nice.

It is not conditions. I think if you set the alignment center in groups and repeating group, it should be centered. Everything is left aligned now.

By the way, this is not the key here. It would work with other settings too. The key is the the hidden extra group that is only visible in the first cell.

I have the hidden extra group already. Your “group add” is my “new” group, set visible on index=1. I have everything the same as yours, except the “wrapped horizontally” setting.

With your method (top), I can’t center the boxes. Using Toolbox to create an extra element in the RG, I can center it.

When I say, the key is not “wrapped”, I didnt mean you can change it and it will magically be column or row repeating group. If you want to display row or column, you have to change the structure of the hidden+visible groups a little bit. I have put them next to eachother for wrapped for example. If you want column, you would structure the hidden+visible as columns as well.