I am trying to use the "responsive item size" for displaying a form with conditional fields inside a masonry layout. So the form has two levels of YES/NO checkboxes – the rest of the form (and therefore the length and height of the content of the grid-item) depends on the choices made by the user.
For now my test case for this scenario would be this:
I get it to work half way – but I probably run against a similar wall as described in issue #1000:
"Looks like the problem is how the height is being set. The animated item sizes demo works by explicitly setting expanded sizes in CSS. With your demo, since it uses images with varying height, we can't use the same technique. One solution would be to calculate the height in JS." (https://github.com/desandro/masonry/issues/1000)
So whenever I click on one option in the form, the grid-item height is re-calculated, the layout adapts the new height. But the problem is that currently the height keeps adding more and more height with every new click event.
So coming back to the suggestion "One solution would be to calculate the height in JS" – i just don't know where and how to calculate the new height and where and how to apply it to the test case "responsive item size". Or to ask the other way round: Is there any working example, where the grid item's height is calculated and applied to the layout after a click on an elementt residing inside that grid-item? Thank you very much! t
I am trying to use the "responsive item size" for displaying a form with conditional fields inside a masonry layout. So the form has two levels of YES/NO checkboxes – the rest of the form (and therefore the length and height of the content of the grid-item) depends on the choices made by the user. For now my test case for this scenario would be this:
https://codepen.io/desandro/pen/DGmpee
I get it to work half way – but I probably run against a similar wall as described in issue #1000:
"Looks like the problem is how the height is being set. The animated item sizes demo works by explicitly setting expanded sizes in CSS. With your demo, since it uses images with varying height, we can't use the same technique. One solution would be to calculate the height in JS." (https://github.com/desandro/masonry/issues/1000)
So whenever I click on one option in the form, the grid-item height is re-calculated, the layout adapts the new height. But the problem is that currently the height keeps adding more and more height with every new click event.
So coming back to the suggestion "One solution would be to calculate the height in JS" – i just don't know where and how to calculate the new height and where and how to apply it to the test case "responsive item size". Or to ask the other way round: Is there any working example, where the grid item's height is calculated and applied to the layout after a click on an elementt residing inside that grid-item? Thank you very much! t