Help with CSS to align repeating group data right to left

stuart.warren1 · 2021-02-03T14:43:04.438Z

Screen Shot 2021-02-04 at 12.39.44 am710×430 44.7 KB

i need help with some css to move the L in the above screenshot to the right. this is a repeating group which will have up to 5 circles so i want the data to align right to left.

boston85719 · 2021-02-03T15:56:33.051Z

You don’t need CSS for that.

You can just put the same element twice in the different positions and then set conditionals to hide or show it based on who lost the match or some other conditional that gets the L to display under the correct club.

stuart.warren1 · 2021-02-03T21:22:07.231Z

@boston85719 I’m not sure I explained the context correctly. The repeating group will return data for the given team’s previous 5 matches. There is conditional formatting to turn the circle green, red or grey based on if it was a win, lost or draw. In the screenshot the teams have only played 1 prior match which resulted in a Draw for MCI and a Win for MUN. If the teams had played 5 prior matches, there would be 5 circles.

What I’m trying to do is align these circles from right to left to keep the design consistent.

boston85719 · 2021-02-04T11:52:36.578Z

stuart.warren1:

If the teams had played 5 prior matches, there would be 5 circles.

So, if a team has won 3 matches and lost 2 matches the L circle will be on the same side of all 5 matches regardless?

How about a screen shot with 5 matches to help understand the concept?

stuart.warren1 · 2021-02-04T12:25:19.838Z

Screen Shot 2021-02-04 at 10.21.16 pm724×540 31.6 KB

Here is a screenshot from another widget but you can see how it shows a list of the last 5 matches and the overall result. The screenshot here show that this team’s last 5 matches has resulted in a Draw, Win, Win, Draw and Loss.

In my original screenshot, what I’m trying to achieve is having the circles for the right team (MUN) to start from the right.

Image if the second row down which has a Draw and Win, if that list would start from the right side of screen instead of the left.

boston85719 · 2021-02-04T13:57:16.630Z

I still think you are better off just using conditionals.

It is also still hard to imagine what exactly you want to accomplish since the screen shots are materially different in that the first has two teams and the second only shows one team.

stuart.warren1 · 2021-02-04T22:14:39.769Z

at the essence, repeating groups list data by default is left to right. I just want to flip that to be right to left. I know that can be done via expose IDs and then creating a small html element with style code. What i cannot work out is the CSS that is required for this to work.

stuart.warren1 · 2021-02-04T22:35:50.832Z

@boston85719 I finally cracked it
I used the HTML code element with the following CSS

<style>
    #right { 
display: flex; 
align-content: flex-end;
flex-direction: row-reverse;
} 
</style>

Screen Shot 2021-02-05 at 8.34.55 am

system · 2021-04-14T14:43:59.712Z

This topic was automatically closed after 70 days. New replies are no longer allowed.