Flexbox layout in fx-repeat

[AlbrechtKaroly]

In Foundation Framework there is a flexbox utility xy-grid. Here there is a container with class="grid-x", and child elements with class="cell small-6". If i want to display a grid layout using fx-repeatitem like this:

<fx-repeat ref="'3','4','5'" class="grid-x">
	<template>
		<div class="cell small-{.}">
		...
		</div>
	</template>
</fx-repeat>

It renders something like this:

<fx-repeat ref="'3','4','5'" index="1" class="grid-x">
	<fx-repeatitem relevant="" repeat-index="">
		<div class="cell small-3">
		...
		</div>
	</fx-repeatitem>
	<fx-repeatitem relevant="">
		<div class="cell small-4">
		...
		</div>
	</fx-repeatitem>
	<fx-repeatitem relevant="">
		<div class="cell small-5">
		...
		</div>		
	</fx-repeatitem>
</fx-repeat>

The problem is that fx-repeatitem is wedged between the grid container and the cell element, and therefor it isn't rendering correctly . Is there a fore conforming solution for this?

[JoernT]

@AlbrechtKaroly have a look here - https://jinntec.github.io/Fore/demo/repeat-attributes.html

Hope this page will give an inspiration ....

data-ref is your friend here.

Please share your findings. Thanks

[JoernT]

should mention the limitation - currently data-ref cannot be nested to get the same as nested fx-repeats would do - however you can still nest fx-repeat within your 'data-ref repeat'.

We eventually plan to improve data-ref support if that's of particular interest.