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 I need additional setup.
Looking at the official template, apparently 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 288pxThen, you can read that 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 thread, reply thread), I have to detect from which <iframe> the message comes. This way, I can resize the correct comment form.
<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>Additional Notes:
The height of the comment form iframe ranging from 184px to 288px.