Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.We should provide some kind of "equal height groups". To do so Foundation provides the Equalizer script: https://get.foundation/sites/docs/equalizer.html
Equal Height Group:
- A boolean / checkbox: "Equalize height with sibling contents" => Automatically find other childrens inside this container
- An additional "Height Group Name/ID" text - or even better - autocomplete (with existing values) field, to define custom groups, if the automatism fails
Issue fork drowl_paragraphs-3204240
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
anybodyI'll postpone this for the future... after upgrades to 4.x are solved.
Comment #3
thomas.frobieterThis becomes more.. important now, because a customer asked for this feature.
Reading the ideas here again, my favorite is this solution, because its very flexible to use. Gave the same "groupname" 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.
Comment #4
anybodyOkay, 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.
Comment #6
anybody@thomas.frobieter here we go (untested!)
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.
Comment #7
thomas.frobieterSounds 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!
Comment #8
thomas.frobieterComment #9
thomas.frobieterDone! 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.
So the object would be something like: equalHeightGroups.groupName.clientRectTopValue.NodeList .. then we loop and equalize these "row-groups" instead the full NodeList of the group.
Or.. simply use THIS o.O https://dev.to/dhruvangg/equal-height-in-vanilla-javascript-49ch
Comment #10
anybody@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.
Comment #11
thomas.frobieterComment #13
grevil commentedLGTM! Just a few minor adjustments. :)
Comment #14
grevil commentedComment #16
thomas.frobieterComment #17
thomas.frobieterUpdated Issue description and moved the min-height setting improvements to: https://www.drupal.org/project/drowl_paragraphs/issues/3342355