BPM, Workflow, and Case

 View Only
Expand all | Collapse all

How to set height of iframe dynamically with React JS

  • 1.  How to set height of iframe dynamically with React JS

    Posted Thu March 10, 2022 11:01 AM
    1. We have module Message Center built in React JS, We are trying to integration MC module in CV through Iframe. In CV we created simple Iframe and passing SRC of the Iframe through Inline JS query parameterized. We are to trying get the height of React JS content with help of syntax document.getElementById("mcFrameID").contentWindow.document.body.scrollHeight but we are getting the value as 0px so I'm appending 550px as constant height. How can we  get the height of the React JS Content dynamic/responsive to the CV so we can set the height of Iframe dynamically.

     

    Custom HTML

    <iframe id="mcFrameID" src="#" width="100%"  frameborder = "0" >

    </iframe>

     

    Inline JS

     

    this.loadIframe=function(){

    var product=this.context.options.product.get("value");

    var libertyHost=this.ui.get("hostLibertyReactJs").getData();

    var userId=this.context.bpm.system.user_loginName;

    var access=this.context.options.access.get("value");

    console.log(libertyHost);

    document.getElementById("mcFrameID").src=libertyHost+"?userId="+userId+"&&product="+product+"&&access="+access;

    document.getElementById("mcFrameID").height = document.getElementById("mcFrameID").contentWindow.document.body.scrollHeight +550+"px";

     

     



    ------------------------------
    Kathy Bazinet
    North America z Sytems DevOps and Digital Transformation Technical Sales Manager
    IBM
    Hartford CT
    860-888-9921
    ------------------------------


  • 2.  RE: How to set height of iframe dynamically with React JS

    Posted Thu March 17, 2022 02:48 PM
    Edited by Paul Pacholski Thu March 17, 2022 02:49 PM
    This article can should help:  https://www.w3schools.com/howto/howto_css_responsive_iframes.asp

    ------------------------------
    Paul Pacholski
    Offering Manager | Digital Business Automation
    IBM Canada Ltd.
    ------------------------------

    Original Message