Struggling with Iframe Resizing in a Full-Screen Modal for Dynamic SVGs

[Emo Flore1]

Hi everyone,

I'm experiencing an issue with a custom Service Portal widget. The widget includes a button that opens a modal displaying an iframe. The iframe's content is generated based on a hash passed in the URL, so its size varies depending on the hash. The problem is that the content inside the modal never displays at the proper size—either the height is too large or the width is too wide.

My first thought was to dynamically adjust the height and width based on the iframe's content, but due to CORS restrictions, this isn’t possible (as far as I know). The second option I considered was to make the modal full screen; however, the iframe content always resizes and becomes unreadable. The final option I'm considering is to set the height and width dynamically based on the length of the hash. While this is possible, it's prone to errors because there can be over 100 different hash variations.

Below you can find the widget's get code and the Angular (ng-template) code.

Does anyone have any suggestions on how to resolve this issue? Thanks!

Widget HTML

<div class="container">
    <button class="btn btn-primary" ng-click="c.openModal()">Show CSDM Model</button>
</div>

CLIENT CONTROLLER

api.controller = function($uibModal, $window, $scope, $timeout) {
    var c = this;

    c.getBa = function() {
        var g_form = $scope.page.g_form;
        return {
            "id": g_form.getValue("business_application") || "",
            "appNumber": g_form.getValue("application_number") || ""
        };
    };

    c.getAs = function() {
        return $scope.page.g_form.getValue("proposed_application_service_s") || "";
    };

    c.getTso = function() {
        return $scope.page.g_form.getValue("proposed_technical_service_offering_s") || "";
    };

    c.getBso = function() {
        return $scope.page.g_form.getValue("proposed_business_service_offering_s") || "";
    };

    c.asRel = function() {
        return $scope.page.g_form.getValue("proposed_application_service_relation") || "";
    };

    function updateModalStyles() {
        $timeout(function () {
            var modalDialog = document.querySelector(".modal-dialog");
			var svg = document.querySelector("iframe");
           
        }, 100); // Delay to ensure modal has rendered
    }

    c.details = function() {
        return c.server.get({
            ba: JSON.stringify(c.getBa()),
            as: c.getAs(),
            tso: c.getTso(),
            bso: c.getBso(),
            asRel: c.asRel(),
            action: "getReqDetails"
        }).then(function(response) {
            if (response.data && response.data.hash) {
                $timeout(function() {
                    var retrievedUrl = "https://www.plantuml.com/plantuml/svg/" + response.data.hash;
                    var iframe = document.getElementById("plantuml_site");
                    if (iframe) iframe.src=retrievedUrl;
                });
            } else {
                console.error("Error: No hash received from server");
            }
        }).catch(function(error) {
            console.error("Error retrieving details:", error);
        });
    };

    c.openModal = function() {
        c.details().then(function() {
            c.modalInstance = $uibModal.open({
                templateUrl: "csdmModalSVG",
                scope: $scope,
                backdrop: 'true',
                windowClass: 'full-screen-modal'
            });
            c.isModalOpen = true;

            // Apply styling after modal opens
            $timeout(updateModalStyles, 200); 
        });
    };

    c.close = function() {
        if (c.modalInstance) {
            c.modalInstance.close();
        }
        c.isModalOpen = false;
    };

    c.initialize = function() {
        c.isModalOpen = false;
    };

    c.initialize();
};

ANGULAR NG-TEMPLATE

<ng-template id="csdmModalSVG">
    <div class="modal-header">
        <h3 class="modal-title">CSDM Diagram</h3>
        <button type="button" class="close" ng-click="c.close()">&times;</button>
    </div>
    <div class="modal-body">
        <div>
            <iframe id="plantuml_site"></iframe>
        </div>
    </div>
</ng-template>