This topic contains 8 replies, has 2 voices, and was last updated by Sean Sean 2 years, 7 months ago.

iframe sized incoreectly


  • spleenboy
    Participant

    Posts: 34
    Member Reply #4347

    I’ve used the markup recommended in another support entry I found on this site to embed an iframe. We are looking to rewrite all out our current admin functions into angular (about 300+ pages), but this will take some time, so as an interim as we work through them, we will have to embed existing ones into the theme within an iframe as there is  lot of internal navigation within them.

    However, the div holding the iframe is setting itself at 159px height.

    My markup looks like this:

    <div class=”page-content-wrapper” style=”width: 100%; height: 100% !important” >

    <iframe id=”iframe” style=”width: 100%; height: 100% !important” src=”/sbc/company_gallery.home”></iframe>

    </div>

    I can give you a login to the site if you want to have a look.

    Thanks


    spleenboy
    Participant

    Posts: 34
    Member Reply #4348
    This reply has been marked as private.
    Sean
    Sean
    Keymaster

    Posts: 4526
    Support Staff Reply #4372

    Hi,

    Sorry, we don’t have a fixed IP.  The iframe integration also requires some JS code to automatically fix the iframe hight to the available window height. Please double check the JS code as well. Also please check the console for possible JS errors that can break the functionality(use chrome and chrome dev tools with CTRL+SHIFT+J).

    Thanks.


    spleenboy
    Participant

    Posts: 34
    Member Reply #4385

    The above url should be open if you want to have a look. Click on the Directory link on the menu down on  the right sidebar.

    What/where am I checking to make sure it is in place. Where is the iframe height set?

    Thanks

     

    Sean
    Sean
    Keymaster

    Posts: 4526
    Support Staff Reply #4400

    Hi :),

    Can you please this this case http://keenthemes.com/forums/topic/page-content-inside-iframe/

    We gave a hint to control the iframe height using some JS code.

    Thanks.


    spleenboy
    Participant

    Posts: 34
    Member Reply #4436

    I’m close: JavaScript is not my strongest. I can set the height manually now, but…

    I put this at the bottom of the relevant controller:

    angular.element(document).ready(function () {

    var height = Metronic.getViewPort().height – $(‘.page-header’).height() – $(‘.page-footer’).height() – 20;

    $(‘#iframe’).css(‘height’, height);

    console.log(‘iframe resized’);

    });

    but get the error:

    Error: Metronic is not defined.

    I’m sure it’s something obvious I’m missing here. What is it?
    Thanks

    • This reply was modified 2 years, 7 months ago by  spleenboy.
    Sean
    Sean
    Keymaster

    Posts: 4526
    Support Staff Reply #4442

    Hi,

    If you are using Metronic v4.5.x version please replace “Metronic” with “App” since in the latest version the class name was changed.

    I hope this will work for you.

    Thanks.


    spleenboy
    Participant

    Posts: 34
    Member Reply #4457

    All working.

    Thank you

    • This reply was modified 2 years, 7 months ago by  spleenboy.
    Sean
    Sean
    Keymaster

    Posts: 4526
    Support Staff Reply #4466

    Great! Good luck with your project! 🙂

You must be logged in to reply to this topic.