Filed under:
When creating a custom template, I notice that the comment form height is not automatically set based on the content height. At first I though it was automatically set, but turns out it requires additional setup.
Looking on the official template, you need to listen for a message event globally. When a blog visitor typing in the embedded comment form, Blogger will send an event data that you can use to resize the form container on your blog.
Try listening to global message events.
window.addEventListener('message', (event) => {
console.log('Message received:', event.data);
);Log:
Message received: set-comment-editor-height 288pxRead the event data and set the height of the embedded comment container in your template, for example:
window.addEventListener('message', (event) => {
if (event.data.includes('set-comment-editor-height')) {
let height = event.data.split(' ')[1];
document.querySelector('.single_comment-frame').style.height = height;
}
});In my case, where the comment two embedded comment forms (main/reply thread), I have to detect from which <iframe> the event data come from.
<script>
window.addEventListener('message', (event) => {
if (typeof event.data !== 'string') return;
if (event.data.includes('set-comment-editor-height')) {
const height = event.data.split(' ')[1];
const frames = document.querySelectorAll(
'.single_comment-frame, .commentFrame'
);
for (const frame of frames) {
if (frame.contentWindow === event.source) {
frame.style.height = height;
break;
}
}
}
});
</script>The height of the comment form iframe ranging from 184px to 288px.
https://www.blogger.com/rpc_relay.html https://www.blogger.com/comment/frame/5730270853270140589?po=1745564999727683218&hl=en&saa=85391&origin=https://gogobarrel77.blogspot.com&skin=contempo https://gogobarrel77.blogspot.com/2026/10/blogger-comment-form-auto-resize.html#comments true ["blogger"]