Search code examples
htmliframeazure-devopsazure-devops-extensions

How to set height of iframe embedded in VSTS hub

I have created a VSTS extension, follow a guide of add a hub. My extension will hold a iframe that render my website for my own job. i can show, but the height of the content in iframe of devops is very short.

Here is my markup and code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="sdk/scripts/VSS.SDK.min.js"></script>
    <title>embedded iframe</title>
</head>
<body>
    <script type="text/javascript">
        VSS.init();
        VSS.ready(function () {
        var assetFrame = document.getElementById("frame");
        assetFrame.src = "https://ehairvietnam.com/contact";
        VSS.notifyLoadSucceeded();

    });
    </script>
    <div id="my-iframe">
        <iframe id="frame" style="width:100%" frameborder="0"></iframe>
    </div>
</body>
</html>

The result:

enter image description here

I inspect it in Chrome, and the iframe 

<iframe class="external-content--iframe flex-grow themeless" 
        role="presentation" frameborder="0" 
        src="https://anhnguyen.gallery.vsassets.io/_apis/public/gallery/publisher/anhnguyen/extension/anhnguyenextension/0.1.1/assetbyname/hello-world.html"></iframe>

is max height, but its content of height just only have 170px.

I've tried to set with height attribute in config file, but nothing changed

"contributions": [
        {
            "id": "Fabrikam.HelloWorld",
            "type": "ms.vss-web.hub",
            "description": "Adds a 'Hello' hub to the Work hub group.",
            "targets": [
                "ms.vss-work-web.work-hub-group"
                ],
            "properties": {
                "name": "LOGTIME",
                "height": "100%",
                "uri": "hello-world.html"
            }
        }
    ],

Thanks you for any your comments.

Solution

  • I think you need to set div's height, this could be because the style of the div limits the display of the content :

    <div style="height: 100%;">
    <iframe id="frame" style="width:100%" frameborder="0"></iframe>
</div>

    Or reference your div from ID in css to set style. You can refer to this case.