Help! Absolute positioning of repeater - expend / collapse / reflow cards - Need math brain muscle here

Hello, I need Math brain muscle here:

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.

I completed all components. The only missing functionality is the reflowing of the cards around the expanded card and placing the expanded card within the row boundaries.

absolute_positioning__of_repeater_cards.rp (451.6 KB)

Preview

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

Thanks in advance,

  • Natalie

Hi Natalie!

I’ve been thinking about this. It’s a hard problem! I’ve been super busy so I’ve not been able to dive in, but I’m thinking this strategy would work. (To give you an expectation, I don’t have the solution yet, but I’m laying out a strategy.)

Define these variables:

  • v_curItemX: the desired X position of the current card. Not the adjusted location: where you actually want it to go on the normal x/y grid.
  • v_curItemY: same thing for Y
  • v_chosenItemIndex: the index of the chosen item; 0 if nothing is chosen
  • v_expandedWidth: the expanded width of the chosen tile
  • v_expandedHeight: the expanded height of the chosen tile.
  • v_tileSpacing: the spacing between tiles

The last line of the OnItemLoad interaction would place the current tile (row) at (v_curItemX, v_curItemY) using the absolute positioning trick, and all the preceding code (and conditions) will calculate those locations based on v_chosenItemIndex

So basically you would click the expander button but not expand it: instead you would set v_chosenItemIndex to the value of the expanded item’s index and then force the repeater to redraw itself. (E.g., set its ItemsPerPage property to Unlimited). This would revert the chosen tile to its normal size anyhow.

Then you would set v_curItemX and v_curItemY based on numerical proximity to v_chosenItemIndex, and also enlarge the card if Item.index equals v_chosenItemIndex.

Things we know:

  • If v_currentItemIndex % 3 is 0, the tile to enlarge is in the left column; if it’s 1, it’s in the middle; if it’s 2, it’s on the right.
  • We can easily find the desired x/y position of the enlarged tile: e.g., it’s X is always 0
  • If v_chosenItemIndex % 3 is 0, we know that we need to restart a row (lower than normal because of the new height of the tile) and put the next 2 items on it, followed by the remaining items, wrapping as appropriate
  • If v_chosenItemIndex % 3 is 1, we have to place the previous tile in the first spot on the next row (which we’d do in the previous iteration of OnItemLoad) and the next tile in the second spot on the next row, followed by all subsequent tiles
  • If v_chosenItemIndex % 3 is 2, we have to place the previous two tiles in the first and second spots on the next row, followed by all subsequent tiles

So that’s where I am. Looking at the above, this seems solvable. If I find the time over the next few days, I’ll take a crack at it. What is your timeline?

Wow, Joseph! This is so ingenious!

My timeline is around the end of November. Appreciate it so much that you have provided the description of your thought process on this. This is really something to learn. Will try to follow your path (although, I think that only you have enough expertise to resolve this pattern).

If there is a chance that you could take a crack at it at your convenience, this would be awesome!

Thank you again!

  • Natalie

Hi Natalie,

I spent a lot of time developing a solution like you describe. It’s in an old project, which I could dig out and strip down to share, but I have a better suggestion for you.

Let go of the expanding repeater and just go with a lightbox popup for an expanded view. On the project in question, I spent a week tweaking an expanding repeater and then the client kept changing the needs for the ‘detailed expanded view’. It became an increasing nightmare to maintain, so I threw out that concept and just had it open a popup instead that is populated with the same content shown in the repeater plus more content hidden in the repeater data, but not shown in the smaller grid view. It makes your life much simpler both now and as you make later changes.

Hi SifuDynamic,

Thank you so much for sharing your experience and a great idea with the lightbox!

Unfortunately, I am constrained by the requirement imitate the source design in my demo :frowning: So, I have to use only the cards for the expanded view and can’t utilize light boxes.

Thanks again!

  • Natalie

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.