'Flexbox'-esque layout possible?

Hi,

I’m putting together a little demo project for my team on the power and time-saving ability of repeaters.

One thing I’m not sure is possible, however, is the ability to alter the size of certain items, and have the Repeater widget wrap around.

E.g., a standard product listing, for example would look like:

[ATTACH]11273[/ATTACH]

This is fine, and I will demo all the cool filtering, sorting, paging, adding and removing etc that can be done.

Something that is quite common now though is the ‘flexbox’ approach, whereby one or more items in the grid will be ‘featured’, and take up more space.

I get how to have the featured item within my dataset, and show it based on a Column value, my problem is to have the Repeater wrap around that now extended width of the row in question, so it is not in fact extended.

This would be my goal:

[ATTACH]11275[/ATTACH]

My problem is I cannot figure out how to dynamically set the wrap/width of the Repeater itself.

This is the current result:

[ATTACH]11276[/ATTACH]

Can it be done?

I thought about, say in the above example, setting Item 4 to some effectively invisible state if Item 3 = Featured, so the Repeater would technically still be showing 3 items on that row, but to the user it would appear as per my goal.

(if State of Item.n.DynamicPanel = Featured
then
Set State of Item.[n+1].DP = Hidden]
) Or something… :frowning:

If it can be done, some tips and guidance would be much appreciated.

Beyond that, super advanced flexible sizing and wrapping, like we’re used to in a Google Photos montage or something, would be amaaaaazing:

[ATTACH]11278[/ATTACH]

Thanks for any help offered!



1 Like

the easiest way is to add an “empty” item behind the double sized (just send it to back). this proceed prevents the need to add manual wraps… manual wrapping case that all item positions have to be set manually.
the following items per row have to be moved to y= -item.width - gutter.width.

flex layout is far far away from repeater functionality.

btw. i posted a feature request to have the option to wrap in horizontal repeaters by pixel.

Thanks Gregor, I guess that is the best way for the time being.

A flexible wrap width would be a a great future.

I have another question for something that has me stumped, in my demo I’m building for a team, but I’ll ask it as a new thread.

Thanks again!

+1
I´m also looking for flexbox functionality.
I want to have a certain number of items spaced evenly in the Y-axis between two objects even as the distance of those objects increase or decrease.
I know there are workarounds, but they are quite timeconsuming.
I could write a function, but as there is no loops available, it will be tough to update all the objects.

Hi!

It’s tedious to fill out the dataset, but one way to achieve this is through absolute row positioning.

Basically you start with a horizontal repeater with no wrapping and make sure the repeater property Fit to Content in HTML is not checked. You’ll want to make the authored width of the row be equal to or smaller than the narrowest width you will use in your output.

To set the absolute x position for any row in a horizontal repeater, you just subtract where the x position of the row would normally be from the desired x position. For example, if the authored width of your row is 10 pixels, then the 4th row would normally be at x=30 (relative to the repeater origin).

Therefore, if the authored width of your repeater row is 10 pixels, and you want to place a certain row at location (x=40,y=100) no matter which row it is in the repeater, you can do it with this expression:

Move (Dynamic Panel containing repeater row) to [[ 40 - 10 * (Item.index - 1)]] , 100

This example shows a repeater that has columns for x, y, width, and height. You set those values for each row to lay out your grid.

Live sample: absolutely positioned repeater

3 Likes

Blimey, will work through this when I have a chance to fully understand it.

Great work Joseph!

Hi Joseph, may I ask you if you could please advise how to make a card to expand to the width of the entire row and push the cards in the expanded card’s row (including the once before the expanded card) to the next row, while bringing the expanded card to the focus on the screen?

I am trying to create this pattern for a non-adaptive/desktop layout, based on the cards generated via a repeater.

CARDS.rp (426.9 KB)

Thank you in advance for any suggestion,
Natalie

Hi Natalie!

This would take a lot of conditions (well, at least three testing for whether the box you want to enlarge is at the left, in the center, or at the right) and a bunch of math, and you would have to use the absolute positioning trick for sure.

Attached is a vertically oriented repeater that is not set to wrap, but is wrapped manually using this trick. The trick is explained decently here. The % sign in the expression is the modulo operator.

I don’t any further time to play with this, but I might give it a shot this weekend. Note that animation would likely not be possible. It might be a lot easier to just use a bunch of rectangles and set it up so only one square works, manually sizing and animating each box to how you want it to end up.

absolute_positioning_of_repeater_grid.rp (47.0 KB)

1 Like

Hi Joseph,

Just wanted to update you on my progress: Here is a Preview

I have used your file as a basis for the template that I have created. Posting it here for your reference.

I think that this template works well. The only missing functionality is the reflowing of the cards around the expanded card and placing the expanded card within the row boundaries. Need Brainmuscle here:
absolute_positioning__of_repeater_grid.rp (486.0 KB)

If you could please help me with this functionality, I would greatly appreciate it!

Thanks in advance,

  • Natalie