“I can’t post the comment on your blog post. The comment verification code(CAPTCHA) form is not displayed fully and looks like bottom of the box has been cut off”. Did you ever received such messages from your blog readers? So, here is a quick trick to solve the problem.
First of all, don’t forget to backup your template. Next, go to Layouts> Edit HTML and select “Expand Widgets Templates”. Now, search for the following code using CTRL+F.
And you will see codes stated below.
<div class=’comment-form’>
<a name=’comment-form’/>
<h4 id=’comment-post-message’><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href=’data:post.commentFormIframeSrc’ id=’comment-editor-src’/>
<iframe allowtransparency=’true’ class=’blogger-iframe-colorize
blogger-comment-from-post’ frameborder=’0′ height=’275′ id=’comment-editor’
name=’comment-editor’ src=” width=’100%’/>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type=’text/javascript’>
BLOG_CMT_createIframe(‘<data:post.appRpcRelayPath/>’,
‘<data:post.communityId/>’);
</script>
</div>
</b:includable>
All you have to do is just change the height=’275′ to height=’410‘. And this is how it will looks like after editing the code.
<div class=’comment-form’>
<a name=’comment-form’/>
<h4 id=’comment-post-message’><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href=’data:post.commentFormIframeSrc’ id=’comment-editor-src’/>
<iframe allowtransparency=’true’ class=’blogger-iframe-colorize
blogger-comment-from-post’ frameborder=’0′ height=’410′ id=’comment-editor’
name=’comment-editor’ src=” width=’100%’/>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type=’text/javascript’>
BLOG_CMT_createIframe(‘<data:post.appRpcRelayPath/>’,
‘<data:post.communityId/>’);
</script>
</div>
</b:includable>
Save the template when you are done. There is also an alternative way to solve this problem without having to change the height of box. It’s by enabling scroll in comment box.
All you have to do is just adding this this small code below beside height=’275′ .
This is how it will look like after adding the code stated above.
<div class=’comment-form’>
<a name=’comment-form’/>
<h4 id=’comment-post-message’><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href=’data:post.commentFormIframeSrc’ id=’comment-editor-src’/>
<iframe allowtransparency=’true’ class=’blogger-iframe-colorize
blogger-comment-from-post’ frameborder=’0′ height=”275″ scrolling=”auto”
id=’comment-editor’ name=’comment-editor’ src=” width=’100%’/>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type=’text/javascript’>
BLOG_CMT_createIframe(‘<data:post.appRpcRelayPath/>’,
‘<data:post.communityId/>’);
</script>
</div>
</b:includable>
Best of luck.
Thanks.. I solve my problem using this ^^
@Uptown Onlineshop
That's great!*_*
Thanks so much! Not only did you SEO yourself to the top of my search for this very specific problem, but it worked perfectly!
Think it's ok to have both auto-scroll and a bigger box on? The comment itself auto-scrolls inside the widget, so it might not be necessary?
@Jtotheizzoe
You are welcome! Actually, it is up to you. You can either use a larger box or auto-scroll or both.
But, I would suggest you to make the box larger so that you blog readers don't have to scroll it down. Haha, being reader-friendly..*_*
Thanks so much for posting this fix. I love it when I can google an issue and find the fix quicker than I can debug the css & HTML.
la la la la