In a repeater, when data entered into the table causes text to wrap, how to push down the widgets below to maintain proper spacing?

I’m using a repeater to simulate a product list (on mobile) that has a photo, product title, price, and pickup data. Sometimes the title is short (one line) and sometimes the title is longer and ends up being two. lines. This seems like it should be such a basic thing, but I cannot figure out how to push the contents down when the data I’ve entered into the table causes the product title to wrap to two lines. I’ve tried to figure out how to do it using the “Loaded” event on the repeater, but I can’t figure out how to set it up and get it to trigger that the box is resizing. I’ve also tried using the “resized” event on the text widget itself, but it doesn’t trigger on load either. I’ve uploaded a screenshot to show the layout I’m trying to figure out.

1 Like

Hello, I know this problem and there are several ways to solve it, and in terms of UX view, it is not necessarily recommended to display a long title in a card compared to a product in the sense that have will be able to see more on the details page of the product in question, then I will recommend that you limit the number of characters to display for a “product title”, there is also a solution to solve your problem spacing between the elements, there is ’ also has the possibility to formater all the information of a line in a text (Rich text), but since your design contains icons, it will be better to limit the characters of your “product title”, and I think with that, whatever the length of the title, it will not impact other elements, I leave you an example for a better understanding.

Card-with-text-formated.rp (1.1 MB)

Hi thudsonlesl,

One solution that has worked for me is to set just the “Product Title” text area as hidden, and adjust all the other items in your repeater widget up - to the same x,y spot as the hidden text area. Then add an “show item” “on item load” interaction to the hidden text area - with a “push widgets below” “height of item” special option.

That interaction will fire each time the repeater loads a row from the data table, adjusting the overall size of the card so it accommodates the items inside it. Note that this will create product cards with different heights, but that should be fine if you are stacking them vertically, but that’s up to you to decide.

Also, full disclosure, I’ve read elsewhere in this forum that doing this does increase the load time of the repeater, and figuring out a conditional move items (like “If height of Z is H, then move yada-yada lower by blah-blah…”) solution, but hey, you can try this one out and make that call.

Holler if you have questions, peace!

1 Like

Thank you for taking the time to provide an example. I do agree that shorter titles would be great, but the way that our products are listed makes it important to allow for longer titles so that customers can differentiate between our products. Unfortunately we do not list products together (which is a whole other UX conversion) so instead of listing one item with three options, it will be listed as three separate items. This creates a situation where the product titles are exactly the same except a differentiator (color, size, etc) tacked on to the end of the product title. I can’t truncate that out. We have more than 50,000 sku’s so it would be no small task for our merchandising team to to re-write them.

1 Like

This worked perfectly. Thank you! On the mobile version I don’t mind if the heights differ, in fact, that’s what started this whole thing is that I didn’t want the whitespace. On the desktop version I want them to stay even so I just lock the height at two lines. Ahhhh you made my day!

Cool. Thanks for letting me know it worked for ya. That made my day :wink:

Awesome, that’s a really good idea, very clever :smiley:

Hey, thanks Serge1! I figured that out by trial and error. I wanted my repeater to make “cards” of different sizes for an activity feed. And I made the (perhaps shortsighted…) decision that the cards should be able to accept images and comments of various heights. So I hid the comment and image widgets in the card, then set an item load interaction to reset the image widget to match the incoming image size, then show the image and the comment, each set to push the below widgets down the height of the target. Here was the result:

1 Like

Very nice work ! :coup de poing:

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