Fix Repeater Alignment- SOLVED

Ask the community
,
1

Is there a way to top align my repeater on each row? It looks fine until the text is pulled in from a collection, and then it moves down.
#repeater #alignment #corvid code

1091×859 122 KB

UPDATE: This issue was solved by adjusting the repeater boxes and moving the title text down to allow more space for new lines.

2

You should make sure that the number of characters displayed in each repeater is the same regardless the number of characters in the database. Utilize the following code snippet to limit your number of characters displayed in the repeater.

export function dataset1_ready() { //allow the dataset to be loaded
    $w("#repeater1").forEachItem( ($item, itemData, index) => { //loop the function
         var string = itemData.description; //description is the field name in the database
         var length = 195; //total amount of words you want to display onscreen
         var trimmedString = string.substring(0, length);
         $item("#description").text = String(trimmedString) + '...';
   });
}
3

Shan, thank you for your suggestion. I tried the code you shared and unfortunately it didn’t solve the problem. (The descriptions are in a text box called #text42, rather than an item description, and I don’t the code addresses this, but I don’t think this is the solution anyway.)

I think the repeater boxes are moving when the item title carries onto a second line, rather than the short descriptions. As you can see, I experimented by changing one of the descriptions to ‘hi’, and the repeater box below still moved down.

I’m not sure what to do here because the item title is not something I can really shorten, and I don’t want to make the font size too small. Any other ideas?

Thanks so much.

917×558 91.3 KB

4

I’m also having this problem and can’t see how to fix it. Any solutions?

5

Just in case: I put my title inside a box container and set the container to the largest height I needed (2 lines worth) + a little extra, If you leave it alone after that and slightly over lap the next element with the little extra it seems to stay put;