Add an equal height setting

This becomes more.. important now, because a customer asked for this feature.

An additional "Height Group Name/ID" text - or even better - autocomplete (with existing values) field, to define custom groups, if the automatism fails

Reading the ideas here again, my favorite is this solution, because its very flexible to use. Gave the same "id" to each paragraph which should have the same height, JS detects the heighest one and updates an according CSS variable. No brainer. We might need to update this on screen resize (https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).

Improving the min-height setting is also a thing, but not that important, and of course not a replacement for this JS solution.

Okay, let's implement this. Autocomplete would make sense, but will cost some time to implement, so this might be a follow-up (for in years, not months ;)).

I'll prepare a MR.

@thomas.frobieter here we go.

I added the field, its schema and it's now added as data-equal-height-group="VALUE" attribute.
I wasn't sure about that part, but at least that should make clear, how to use it. Perhaps that kind of neutral attribute is also a good idea, or perhaps not.

I guess you can now make the next steps from here.

Everything else not implemented here, but still making sense, should then be transfered into a separate follow-up task, so we can close this one fixed when the feature is merged.

Sounds very good, data-attribute is exactly what I've imagined. I'll add the JS part and we are done :)

I agree, we should split the other ideas into seperate tasks, I will do this later!

Done! Please review :)

We might should improve it.. by also comparing the getBoundingClientRect().top values inside one group. This would be a pretty simple streightforward way to make this more mobile friendly, by adressing only the current layout row, instead of all cells in all rows... mhm.

@thomas.frobieter review done! Nice work! :)

Please fix the clear issues and afterwards please assign @Grevil for his comments. I don't have the time to check for the correct implementation details in the loops. But we should be 100% sure to use it correctly for performance and functionality reasons.

LGTM! Just a few minor adjustments. :)

Uncaught TypeError: el.style is undefined

Updated Issue description and moved the min-height setting improvements to: https://www.drupal.org/project/drowl_paragraphs/issues/3342355 ✨ Improve the min-height setting Active

Automatically closed - issue fixed for 2 weeks with no activity.