3

HTML の何が問題なのかわからないためjquery-ui-layout、ブラウザー (Chrome/Firefox) でズームアウトするときに、ライブラリーはコンテナーの幅/高さを再計算したくありません。私の HTML では、すべての白いペインが互いに接続されていますが、ズームアウトすると切断されます...

私は公式jquery-ui-layoutのデモ、例えばこれを 見ました: http://layout.jquery-dev.com/demos/example.html styleしかし、私のコードでは - それは起こりません - 値は同じままです...

ブラウザで数回ズームアウトすると、コードでセクションがどのように見えるかを次に示します。

白いセクションが互いに切断されます

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-layout/1.4.3/jquery.layout.min.js"></script>

    <style>
        body { background-color: green; }
        .xxx { height: 100vh; }
        .left { background-color: red; }
        .right { background-color: green; }
        .visible-overflow { overflow: visible !important; }
    </style>
</head>

<body>

<div class="layout-container visible-overflow">

    <div class="xxx ui-layout-center inner-layout left">
        <div class="ui-layout-center auto-overflow"></div>
        <div class="ui-layout-east"></div>
    </div>

    <div class="ui-layout-east pane-selector right-side-board-panel right"></div>
</div>

<script>
    var element = $('.layout-container');
    element.layout({ applyDefaultStyles: true });
    element.find('.inner-layout').layout({ applyDefaultStyles: true });
</script>

http://plnkr.co/edit/DhQyktteFfyd5hrKxJQX?p=preview

(問題を確認するには、plunker で別のウィンドウでプレビューを起動し、ブラウザでズームアウトを数回選択してください)

4

1 に答える 1