Align elements to the right in a repeater

Ask the community
,
1

Hello everyone. does someone know how to align elements to the right in a repeater with code? I mean in every new row not the layout section.

1188×318 16.7 KB

2

Have a read of the repeater api and text api to see if you can do it yourself.
https://www.wix.com/corvid/reference/$w.Repeater.html
https://www.wix.com/corvid/reference/$w.Text.html
https://support.wix.com/en/article/corvid-about-formatting-text-elements

3

Corvid doesn’t allow setting placement of DOM elements so no. At least not without doing some silly calculations to create 1 to 3 empty repeater items based on how many items are being displayed. You can decide for yourself if that’s something worth investing a bit of time on.

4

I don’t think Wix supports right-to-left layout for repeaters.

5

(But in your specific example I think you can achieve what you want without a repeater).

6

thank you David.

7

@jonatandor35 thank you J.D its connected to a database so …

8

@adambengigi I know it‘s connected to a database, but since each item probably has less than 20 features assigned to, It’s pretty easy to do it even without a repeater using some simple code. I’ll try later today to add some explanation.

9

@jonatandor35 thank you i Appreciate it

10

@adambengigi to be more efficient, please answer the following questions:

  1. Is it a dynamic page or a regular page?
  2. Are you currently using a dataset or query your collection directly?
  3. If an item doesn’t have a certain feature, let’s say Item X doesn’t have “Horses”, do you want this feature box to appear but without a ”checked” icon, or not to be there at all?
  4. How do you organize these features in your data collection? Can you upload a screenshot from your collection?
11

@jonatandor35 1) dynamic
2)query
3)not to be there
4)attached Boolean

1198×416 9.97 KB

12

@adambengigi
OK. The picture you uploaded is blurry, but I think I got the point.
So first of all we need to order all the features in 1 array.
You can do it using an afterQuery hook in the back end:
(Alternatively, you can decide to arrange your collection differently and you won’t need all this back-end hook)

//Create an array with all the feature data (hereafter: item.itemFeatures)
let allFeatures = ["fieldKey1", "fieldKey2", "fieldKey3"] // put here the field key in the order you want them to appear
let allfeatursTexts = ["Horses", "Spa"…]/* keep the same order as in the previous array.
keys of all the features type you want (in the order you'd like them to appear)*/
let itemFeatures = [];
allFeatures.forEach((e) => {
if(item[e]) {
itemFeatures.push(allfeatursTexts[allFeatures.indexOf(e)]);
}
})
item.features = itemFeatures;

This is on the back end.
On the front end, 20 boxes (or the max features that can be assigned per item) and put the once next to the other.
On the property panel change their names to be fBox0, fBox1, fBox2 etc… (keep the order).
In each box put a text-box. Make all the boxes collapsed by default.
Then run your query.

//Populate and expand the relevant feature boxes
wixData.query(….)
….
.find()
.then((results) => {
let item = results.items[0];
for(let i = 0; i < item.itemFeatures.length; i++){
$w("#fBox" + i).text = item.itemFeatures[i];
$w("#fBox" + i).expand();
}
})
13

@jonatandor35 Thank you very much for your effort ill try it :slight_smile:

14

@adambengigi You’re welcome.