Search code examples
jqueryjquery-ui-layout

Panes do not change size when Zoom Out in browser

I can not figure what is wrong with my HTML so jquery-ui-layout library does not want to recalculate widths/heights of containers when Zooming Out in Browser (Chrome/Firefox). In my HTML all white panes are connected to each other but when I Zoom Out they get disconnected...

I looked at official jquery-ui-layout demos, e.g. this one: http://layout.jquery-dev.com/demos/example.html As you can see on Zoom Out elements (their inline style attributes) dynamically change their values. But in my code - it does not happen - values remain the same...

Here's how sections look in my code when Zoom Out a few times in browser:

White sections get disconnected from each other

<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

(To see a problem please choose Launch the preview in a separate window in plunker and then Zoom Out in browser a few times)

Solution

  • You were 99.99% correct in your approach. you just missed to give height to your layout-container just similar to xxx

    I just modified following single line:

    .layout-container,.xxx { height: 100vh; }

    Rest of the code was perfect.

    <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; }
        .layout-container,.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>