Search code examples
javascripthtmlangularjsiframeangular-ui

angular-ui-layout - resize doesn't work properly with an iframe

As you can see in the example, resizing doesn't work properly when using an iframe. You can move the splitter to the left, but not to the right. Does anybody know why this is and how it could be fixed?

<!DOCTYPE html>
<html ng-app="x">

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width">
    <title>UI.Layout : demo </title>

    <link rel="stylesheet" type="text/css" href="https://rawgithub.com/angular-ui/ui-layout/master/src/ui-layout.css"/>
    <style>
        .html-back {
            background: #eee;
        }
    </style>
</head>

<body>
<div ui-layout options="{ flow : 'column', disableToggle: true }">
    <div ui-layout-container size="50%" class="html-back">
        AA
    </div>
    <div ui-layout-container size="50%" class="html-back">
        <iframe style="width: 100%; height: 100%;" src=""></iframe>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-layout/master/src/ui-layout.js"></script>
<script>
    var app = angular.module("x", ["ui.layout"]);
</script>
</body>
</html>

Solution

  • The problem seems to be that the iframe steals the focus. I managed to prevent this by adding an overlay div while moving the split bar.

    <!DOCTYPE html>
<html ng-app="x">

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width">
    <title>UI.Layout : demo </title>

    <link rel="stylesheet" type="text/css" href="https://rawgithub.com/angular-ui/ui-layout/master/src/ui-layout.css"/>
    <style>
        .html-back {
            background: #eee;
        }
    </style>
</head>

<body>
<div ng-controller="AppController">
    <div ui-layout ui-layout-loaded options="{ flow : 'column', disableToggle: true }" id="splitViewContainer">
        <div ui-layout-container size="50%" class="html-back">
            AA
        </div>
        <div ui-layout-container class="html-back">
            <iframe style="width: 100%; height: 100%;" src=""></iframe>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-layout/master/src/ui-layout.js"></script>
<script>
    class AppController {

        constructor($document, $element, $scope) {
            this.$document = $document;
            this.$element = $element;
            this.$scope = $scope;

            this.mouseDown = this.mouseDown.bind(this);
            this.mouseUp = this.mouseUp.bind(this);

            this.$scope.$on("ui.layout.loaded", () => {
                this.splitter = this.$element.find(".ui-splitbar");
                this.splitter.on("mousedown", this.mouseDown);
            });

            this.overlay = angular.element("<div></div>");
            this.overlay.css({
                width: "100%",
                height: "100%",
                "z-index": 1,
                position: "absolute",
                top: 0,
                left: 0
            });
        }

        mouseDown() {
            if (!this.splitViewContainer) {
                this.splitViewContainer = this.$element.find("#splitViewContainer");
            }

            this.splitViewContainer.append(this.overlay);
            this.$document.one("mouseup", this.mouseUp);
        }

        mouseUp() {
            this.overlay.remove();
        }

    }


    const app = angular.module("x", ["ui.layout"]);
    app.controller("AppController", AppController);
</script>
</body>
</html>