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

Gerhard

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: https://www.treeofgnosis.com/faq/ - 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: http://stackoverflow.com/questions/819416/adjust-width-height-of-iframe-to-fit-with-content-in-it 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 https://open.vanillaforums.com/discussion/22671/comments-embed-code and the other threads about this topic on here, but none worked for me.

vrijvlinder

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

Gerhard

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)

vrijvlinder

Sorry for that, I forgot I had written that in my forum but not here, now I did.

https://open.vanillaforums.com/discussion/33240/how-to-embed-your-forum-in-wordpress

Gerhard

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.

vrijvlinder

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..

Gerhard

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

vrijvlinder

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.

Gerhard

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.

vrijvlinder

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.

Gerhard

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.

vrijvlinder

you can add a max-height or a min-height or try https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Gerhard

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.

vrijvlinder

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.

Gerhard

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.

x00

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.

x00

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

Gerhard

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