{"id":690,"date":"2023-04-10T11:09:25","date_gmt":"2023-04-10T18:09:25","guid":{"rendered":"https:\/\/www.mavice.com\/blog\/?p=690"},"modified":"2023-04-14T14:12:15","modified_gmt":"2023-04-14T21:12:15","slug":"dynamic-alignment-with-resizeobserver","status":"publish","type":"post","link":"https:\/\/www.mavice.com\/blog\/dynamic-alignment-with-resizeobserver\/","title":{"rendered":"Dynamic Alignment with ResizeObserver"},"content":{"rendered":"\n

\u2764\ufe0f CSS3<\/h2>\n\n\n\n

We love modern web standards. CSS3 APIs like Flexbox and Grid offer robust tools for layout – adept at cleanly handling common scenarios. Still, special circumstances arise. When they do, JS APIs like ResizeObserver are available to bridge the gap.<\/p>\n\n\n\n

A Card Problem<\/h2>\n\n\n\n

On entry to a client automotive pricing application, the user is presented with vehicle cards in a carousel.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

For some models, the cards are straightforward – names, pricing, images, marketing copy, disclaimers, etc. These cases more closely reflect the original design – a simple layout with alignment achieved with fixed heights, element positioning, and content restrictions.<\/p>\n\n\n\n

Despite such cases, the underlying card components are dynamic and complex. Driven by authored content, service data, and application logic, there exist a large number of element combinations and sizes which may display for other model lines. Cards may have seasonal notices, incentives, option toggles, and other conditionally displayed elements – all driven by content, services, and configuration across a large number of models.<\/p>\n\n\n\n

This complexity brings us to our problem – alignment<\/strong>. Without frequent design updates to keep pace with new features, the existing layout was stressed. Small content overflows or enablement of features would cause misalignment of adjacent card sections.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

As more models displayed alignment issues, it was clear a comprehensive fix was needed.<\/p>\n\n\n\n

Skip to demo<\/a><\/p>\n\n\n\n

Seeking Alignment<\/h2>\n\n\n\n

While redesigning the cards or adding restrictions on content authoring were possible, they would incur substantial client overhead.<\/p>\n\n\n\n

What about available layouts APIs? CSS Grid, Flexbox, and Tables were all considered, but were either insufficient or required the same hack to utilize. Cards would need to be split into constituent sections and distributed across a layout. This would break encapsulation for the card components and increase complexity. We were also already displaying cards in multiple layouts, including both carousels and grids.<\/p>\n\n\n\n

Maybe alignment was not the container’s responsibility, but the card’s. Could the card flexibly align itself with neighbors? With pixel-perfect alignment and no restrictions on configuration or content? Say hello to…<\/p>\n\n\n\n

Resize Observer<\/h2>\n\n\n\n

ResizeObserver is an interface for monitoring dimension changes in the DOM. As a lower-level JS module, it’s not typically used for layout. However, with the power to efficiently monitor component sizes in realtime, it is worth considering in a pinch.<\/p>\n\n\n\n

So how does it work?<\/p>\n\n\n\n

const myObserver = new ResizeObserver(entries => {<\/code>\n    entries.forEach(entry => {<\/code>\n        console.log('height', entry.contentRect.height);<\/code>\n    });<\/code>\n});<\/code>\n\nconst myEl = document.querySelector('.my-element');<\/mark> myObserver.observe(myEl);<\/mark><\/code><\/code><\/pre>\n\n\n\n
If we can measure the height of card sections, we can respond to size changes and inject a padding element to bring all section heights to the max sibling height. What might this look like in practice?<\/p>\n\n\n\n
This wrapper element has a dynamically injected spacer to align with its neighbors.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
An example with spacer elements highlighted.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Vue Directive<\/h2>\n\n\n\n
Our application is written in Vue, so we could implement a solution using a Vue directive. The logic for element observation, height calculation, and padding element injection would reside in one location and be cleanly applicable with a directive tag. When used, the directive would inject padding elements and register itself for height updates.<\/p>\n\n\n\n
(demo to follow)<\/p>\n\n\n\n
const registry = {\n    _lookup: new Map<\/em><\/strong>(),\n};\n\n\/\/ On resize events, trigger recalculation\nconst resizeObserver = new ResizeObserver((entries) => {\n    const targetKeys = new Set<\/em><\/strong>(\n        entries.map((entry) => registry._lookup.get(entry.target))\n    );\n    targetKeys.forEach((groupKey) => registry[groupKey]?.recalc());\n});\n\nfunction recalcHeights(groupKey) {\n    const els = registry[groupKey]?.els;\n    \/\/ Calculate max height and update spacers\n    ...\n    \/\/ Update spacers\n    ...\n}\n\nfunction zeroSpacers(groupKey) { ... }\n\nfunction augmentAndRegister(el, groupKey = '_') {\n    \/\/ Append spacer el\n    ...\n    \/\/ Add to registry\n    ...\n    \/\/ Observe with resizeObserver\n    resizeObserver.observe(el);\n}\n\nfunction unregister(el, groupKey = '_') { ... }\n\nfunction bind(el, { value: groupKey }) {\n    augmentAndRegister(el, groupKey);\n}\n\nfunction unbind(el, { value: groupKey }) { ... }\n\nconst directive <\/em><\/strong>= {\n    bind,\n    unbind,\n};\n\nexport default directive<\/em><\/strong>;<\/code><\/pre>\n\n\n\n
This allowed card sections to be tagged with a height-sync directive and unique key. The following card template code indicates the ‘.marketing-message-wrapper’ section will be height synchronized across any card instances. (If multiple card sets are desired, a composite key with the card group may be used.)<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Alignment Demo<\/h2>\n\n\n\n
See this pattern implemented in vanilla JS on Codepen.<\/p>\n\n\n\n
\n  See the Pen \n  Resize Observer – Height Demo<\/a> by Ryan Jones (@TheRyjo<\/a>)\n  on CodePen<\/a>.<\/span>\n<\/p>\n