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.

Embedded forum gets cut off at bottom

I have embedded my forums onto my wordpress site, but the bottom footer of the forums gets cut off. It's always just the footer, no matter how long the forum page is. This causes problems because if I middle-mouse click to scroll, it will only move the forums inside the iframe for an inch and then stop. Another issue is that the top gets cut off when I go to a post as it will try to jump down to the topic, instead of staying at the top with the menus.

I have tried using both the plugin and the embed code to embed the forum, but I get the same issue on both.


Comments

  • it would be easier if you posted a link.

    If there is javascript errors the embed code may not be reached.

    Embed code is a start it cannot account for every eventuality, if you have element outside of the embed area purposely overlaying, then obviously ebbed code can't deal with that.

    grep is your friend.

  • x00x00 MVP
    edited October 2014

    It does sound like from you description there is some resizing. Or is the the embed area always a fixed size?

    grep is your friend.

  • Unfortunately I can't make the site publicly available.

    As for something purposely overlaying, I don't think so. There is nothing like that on any other page.

    No, the embedded area is not always the same size. If I go to a post with lots of replies, the page becomes longer as expected, but the page still gets cut off as seen above.

  • it is a style issue. Either in the embed theme, or the the wordpress theme.

    I can't diagnose it from screen-shots sorry, you will have to debug it using and inspect tool.

    Look for negative margins, positioning etc, this may cause height issues.

    grep is your friend.

  • @omfgblondie said:
    Unfortunately I can't make the site publicly available.

    As for something purposely overlaying, I don't think so. There is nothing like that on any other page.

    No, the embedded area is not always the same size. If I go to a post with lots of replies, the page becomes longer as expected, but the page still gets cut off as seen above.

    For me this was a constant problem in previous versions of vanilla, and may still be. And expecially happened with ie browsers.

    suggestion: don't embed.

    this also may give you some ideas - although slightly different:

    http://vanillaforums.org/discussion/28050/vanilla-forum-comment-integration-wordpress

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    Ok, you need to understand a couple things. First, when you embed anything and in this case an iframe of the forum, it is the theme of the place you are embedding that needs to be fixed so your forum fits. This has nothing to do with Vanilla .

    Several people come in here with the same problem. If your forum does not get cut off in the stand alone version and the theme is fine, then the problem is with the theme where you embedded the forum.

    You need to make the container of the forum large enough so it fits.

  • edited October 2014

    So, I solved my issue with a real ugly hack.

    in /js/embed_local.js I changed this:

    currentHeight = newHeight;

    to this:

    currentHeight = newHeight+100;

    Everything looks right now, even at 1280x720 (normally I used 1920x1080). Need to set up a bigger monitor to test a larger resolution, but it looks fine when I zoom out with ctrl+scrollwheel.

    The issue was that no matter what heights I set in the CSS or in other javascripts, that function would resize it. Will look at making a prettier fix later

    hgtonightMoehrenstein
  • hgtonighthgtonight ∞ · New Moderator
    edited October 2014

    @omfgblondie said:
    So, I solved my issue with a real ugly hack.

    ...

    The issue was that no matter what heights I set in the CSS or in other javascripts, that function would resize it. Will look at making a prettier fix later

    Hacks are fine as long as you don't advocate them for other users.

    Glad you sorted it out!

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • This can be fixed by sorting out the css. You need to understand the css box model and how then look what is it using for height which looks to be offsetHeight

    https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetHeight

    note margin is not included.

    grep is your friend.

  • @omfgblondie‌ - I am having the exact same issue and I've read this discussion and even started another one. I tried the embed_local.js '+100' hack but it did not solve my problem. I am using the Universal Code since I'm not imbedding in Wordpress; the universal code references embed.js. Any thoughts or updated prettier fix?

    @x00‌ - I would love to have this fixed with css. I really want to keep my form embedded and feel that I'm really close. Could the CSSedit plugin help me solve this?

  • CSSedit doesn't solve css issues, it is simply a way of adding the odd bit of css.

    If you really want to solve css issue yourself first you need some basic understanding of css, then you need to learn how to use one of the inspect tool that come with browser, or as an addon to a browser, as 99% of those

    I can't help people who can't show a working example. I simply can't speculate with css issues.

    All this clutching at straws, speculative shotgun debugging from afar really isn't that helpful.

    Aslo the whole embed system is meant to work around an embed theme bundled in the core, other embed them have to relate tot hat embed theme. Those making a different embed theme need to understand the embed theme, and test theirs against the embed system, extensively.

    grep is your friend.

Sign In or Register to comment.