Multiple containers on single page causes all container to have same height

[vinha]

If there are more than one Freetile containers on the page, all of them will get the same height value, no matter how much content they hold.

Furthermore, the height value Freetile applies on all containers seems to be approximately the sum of heights of the containers before Freetile's layout changes.

Apart from that, the elements seem to align nicely inside their containers.

[yconst]

Are you using a single call to freetile or separately for each container?

[vinha]

This is my testing page: http://vinha.fi/emgrid/

The issue happens if I add a new similar .tiles container after the first one is closed. Freetile is called in main.js.

Please ignore the nested container, it isn't affected by Freetile (which is how I wanted it to behave).

[NeoMudaly]

Seems fine to me in Safari, iPad. Maybe browser related?

[vinha]

Sorry for misleading URL, It is fine because there are no multiple containers :)

Here is an example of having multiple containers:
http://vinha.fi/emgrid/multiple.html

[yconst]

At them moment Freetile does not support multiple containers in a single call. It is in my improvements list, will implement soon. For now, try:

$('.main.tiles').each(function() {
$(this).freetile({
selector: '.tile',
animate: true,
elementDelay: 30
});
});