Размер панелей не изменяется при уменьшении масштаба в браузере

Я не могу понять, что не так с моим HTML, так jquery-ui-layout библиотека не хочет пересчитывать ширину / высоту контейнеров при уменьшении масштаба в браузере (Chrome/Firefox). В моем HTML все белые панели связаны друг с другом, но при уменьшении масштаба они отключаются...

Я посмотрел на официальную jquery-ui-layout демонстрации, например: http://layout.jquery-dev.com/demos/example.html Как видно на элементах Zoom Out (их встроенные 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, а затем несколько раз уменьшить масштаб в браузере")

Источник

1 ответ

Решение

Вы были на 99,99% верны в своем подходе. Вы просто пропустили, чтобы дать height на ваш layout-container просто похоже на xxx

Я только что изменил следующую строку:

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

Остальная часть кода была идеальной.

<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>
Источник
Другие вопросы по тегам