Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

How do you get Vanilla comments to resize when embedded as Wordpress comment?

GerhardGerhard New
edited March 2017 in Vanilla 2.0 - 2.8

Hi everyone, I am using the 'Vanilla Forum' Wordpress plugin to make blog comments use Vanilla, but I am having a problem with the resize.

At the moment, I have iframe {height: auto;) on the wordperss css, and and for some reason the height it chooses is always 150px. I can manually increase this, but obviously the height will be different from post to post, and it will increase every time someone comments.

Here is a link to the problem: - if you scroll to the bottom of the page, you can see that most of the comment section is cut out.

I did try a solution from here to automatically resize all iframes: with:
function resizeIFrameToFitContent( iFrame ) { iFrame.height = iFrame.contentWindow.document.body.scrollHeight; } window.addEventListener('DOMContentReady', function(e) { var iframes = document.querySelectorAll("iframe"); for( var i = 0; i < iframes.length; i++) { resizeIFrameToFitContent( iframes[i] ); } } );
in the Wordpress scripts - but it doesn't work, no idea why.

Can anyone provide a helping hand? I am totally unsure what I could try. Thanks in advance for any help.

Where do you think the error/fix lies? Somewhere in Wordpress or in the Vanilla files? I see there are some codes for Vanilla embed.

PS I also tried this and the other threads about this topic on here, but none worked for me.



  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    Yes, there is a tutorial about this in the Tutorial category .

  • GerhardGerhard New
    edited March 2017

    Could you give me a link to the one you're thinking of?

    I have followed all the tutorials provided with the plugin, and I'm pretty sure I've done everything correct there. Is this tutorial related especially to getting the iframe height to fit its contents? I am getting everything else to work except this

    (I apologize if the answer is somewhere here on Vanilla, I have tried searching for it, but I can't find anything related to my problem that works)

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
  • hmmm that page seems to be explaining how to embed an entire forum into your WordPress - I am just trying to embed a thread into my blog post as a replacement for the native comments. In particular, I am struggling to make the iframe's height correspond with the the height of the iframe Content.

    Can anyone advise on my issue?

    I have since been playing around in /js/embed.js at lines 279-285, but with no luck at getting a responsive height.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    The same principle is applied, but if you don't want to follow my advice, then maybe someone else can help you.. I have helped resolve these issues 100's of times.

    Maybe search the forum some more..

  • Thanks for your replies @vrijvlinder, I'll have a look at your link and other threads once again I suppose, it's just that reading through it, it doesn't seem to be addressing the issue of the iframe self-adjusting to be the correct height.

    Apart from that, I have already followed what the tutorials say, and everything else works pretty much fine

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited March 2017

    Ok look, I will say it one more time. I just saw your site and it appears that I am correct in my assumption that you need to add some CSS like I explained in the tutorial. I just added that in my web inspector and confirmed what I have been saying all along.

    Now if you don't want to listen or think someone else will help you solve this, be my guest.

    height:auto; does not work on iframes or embedded objects. So unless you fix that, it will continue to get cut off and not fit in the spot you put it.

  • Like I explained, the height needs to dynamically change depending on the length of the coments - adding min-height:1200px; or similar in css does not fulfill this requirement.

    You can't have a blog who'se comments are always 1200px long, where there are vast empty spaces when there's no comments, and who still doesn't show all the comments if there are enough. For instance, right now I set my website to height: 1200px;, and there is an open white space at the bottom through the link I gave.

    I'd love for you to point out my error, but I don't believe css can be used for dynamically changing the height.

    I think the solution may lie in embed.js near line 260 using a solution like this or this or this, but I can't get any to work.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    height:auto; does not work on iframes or embedded objects.

    You can add whatever height you want it to be so it does not cut off the comments box. But you can't use auto

    You don't seem to understand that the embedded comment iframe is not the problem, it is the spot you added it into ... and you cant use that javascript you pointed to either because the iframe is a src document.

    The best way is to use css and make the div where you embedded the comments large enough for the box, and to control it's height you can use a scrollbar.

    This means you must add the css to the wordpress theme, not vanilla.

  • GerhardGerhard New
    edited March 2017

    You can add whatever height you want it to be so it does not cut off the comments box. But you can't use auto

    Cool I understand, I've taken that off.

    You don't seem to understand that the embedded comment iframe is not the problem, it is the spot you added it into

    But the error does seem to be in the iframe. For example, the iframe is in div.vanilla-comments- if I do NOT set its height at all, but I set iframe { height: 2000px;), then div.vanilla-comments automatically stretches to the 2000px as well.

    The problem I have is to make the iframe (and also its parent div.vanilla-comments) stretch to the correct height. Do you understand my problem? I get that I can make the CSS iframe { height: 100,000px;)which will always show my comments, but I want the iframe to be the CORRECT height, not overly large.

    From your CSS solution, it seems to be a constant, static height. Is that how you mean it to be??

    and you cant use that javascript you pointed to either because the iframe is a src document.

    That's unfortunate, I don't know much about this, but a resize height solution to the CORRECT height is exactly something I was hoping for.

  • There must be a way to dynamically set the height of the iframe to match its Content height.

    That seems to be a minimum requirement of a plugin like this.

    Any help or pointers on how to achieve this will be appreciated.

    All I can think of is to leave the plugin and insert an iframe that is not an src document so that you can use some sort of resize jQuery function.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    You don't get it. The problem is not with the plugin but with your wordpress theme. That is what you need to fix in order to make room for the embedded comments iframe. Your theme is what is causing this, not the plugin.

  • It seems to me like you want me to change the CSS of the Wordperss theme. This does NOT allow you to DYNAMICALLY change the height of the embedded comment's iframe/div.

  • the javascript won't work becuase it is listening for DOM ready and the comments iframe is loaded dynamically.

    It is a long time since I have used this pluigns but surprised it doesn't already do this. Try in a plain theme.

    An iframe is just an element in the page, you are resizing the iframe itself not its content which is absolutely possible.

    grep is your friend.

  • If I remember vanilla has two different version of the embed.j one in the core and one in the vanilla pluign. I would fork that and use you own, it would be easier to controll from the scrip that loads

    grep is your friend.

  • Thanks for the reply - I also responded on the other thread.

    I tried in a plain theme and the issue still persisted with the plugin :/

Sign In or Register to comment.