Dynamic Sizing
Loading "Dynamic Sizing Rxiyf"
Dynamic Sizing Rxiyf
Run locally for transcripts
π¨βπΌ Users expect iframes to fit their content perfectly, not waste space or require scrolling. The journal viewer should automatically adjust to show exactly what's needed.
const height = document.documentElement.clientHeight
const width = document.documentElement.clientWidth
window.parent.postMessage(
{
type: 'ui-size-change',
payload: { height, width },
},
'*',
)
Use
clientHeight and clientWidth to measure the full content dimensions, then send a ui-size-change message to the parent window so it can resize the iframe accordingly.The static
preferred-frame-size from the previous exercise works for fixed layouts, but journal entries have varying content lengths. A short entry wastes space, while a long entry gets cut off.Just make sure you utilize scrolled elements to avoid requesting a ton of
height or width with a lot of content.
Measure after the component renders to get accurate dimensions. This typically
happens so fast the user won't notice.
Now implement the size measurement to make the journal viewer fit perfectly.
π° I'll be in the instructions a bit because this isn't a React workshop, so if
you're unfamiliar with React, don't worry.
