Ограничение страницы из-за активации меню после полной загрузки страницы - шаблона

Первый вариант - режим загрузки страницы - это если прервать ее на этапе загрузки, а не полностью. Страница загружается не полностью. В этом случае - вариант - все содержимое отображается в браузере - загружается соответственно то содержимое, которое успело загрузиться - которое успело загрузиться до прерывания.

Второй вариант - загрузка страницы - это если вы не прерываете загрузку и загрузка завершена. Все содержимое страницы полностью загружено. Но в момент - сразу после полной загрузки - происходит отсечение - уменьшение видимости содержимого - вы не можете полностью просмотреть - казалось бы, полностью загруженную страницу. Содержимое отрезано.

Возможно, где-то что-то не работает. Может ли это быть из-за бокового меню?

Я пытаюсь создать оболочку для Django Python. И у меня есть странная вещь - видимость - доступность контента ограничена. Хотя при загрузке вроде бы все загружается - но вот при полной загрузке почему-то возникает ограничение - нет прокрутки всего содержимого. Может быть, вы сможете разобраться, почему это происходит со мной.

Когда страница полностью загружена, видимость содержимого отключается.

Помогите, пожалуйста.

Этот код после полной загрузки страницы - ограничивает часть страницы - шаблон.

Эффект этого кода заключается в ограничении доступа к содержимому и не позволяет просматривать содержимое за пределами того, что видно на скриншоте - как будто оно обрезано и дальше одной диаграммы ничего нет - хотя при загрузке загружается много чего - и в конце стоит ограничение на вырезание.

Когда он удален, все загружается нормально - но кнопка активации вызова меню не активна - слева вверху.

https://fomantic-ui.com/modules/sidebar.html#/examples

Этот код после полной загрузки страницы - ограничивает часть страницы - шаблон.

  // using context
      $('.ui.sidebar')
        .sidebar({
          context: $('.bottom.segment')
        })
        .sidebar('attach events', '.ui.top.attached.demo.menu .item')
      ;

На первом снимке экрана видно, что я не могу прокрутить страницу дальше, чтобы увидеть содержимое.

Я не вижу содержимого - прокручиваю скролл с правой стороны - что-то ограничивает отображаемое содержимое на странице.

Справа - вы можете видеть прокрутку - на скриншотах - вы можете видеть разницу между тем, каким должно быть содержимое - оно должно быть все видно.

Но на первом скриншоте вы можете увидеть - как на самом деле отображается страница - что она представляет собой в данный момент.

index.html

content.html

{% extends "realnost/index.html" %}

{% block content %}
    <h5 class="ui grey header">Мониторинг систем теплоснабжения</h5>
    <h5 class="ui grey header">Режимные характеристики котельной</h5>
    <h5 class="ui grey header">Режимные характеристики котла №1</h5>
    <div class="ui segment">
        <p>Выработка котлом №1</p>
        {{ chart1k1|safe }}
    </div>
    <div class="ui hidden divider"></div>
    <div class="ui segment">
        <p>Удельный расход условного топлива на выработку котла №1</p>
        {{ chart2k1|safe }}
    </div>
    <div class="ui hidden divider"></div>
    <div class="ui segment">
        <p>КПД котла №1</p>
        {{ chart3k1|safe }}
    </div>
    <div class="ui hidden divider"></div>
    <div class="ui segment">
        <p>Температура уходящих газов за котлом №1</p>
        {{ chart4k1|safe }}
    </div>
    <div class="ui hidden divider"></div>
    <div class="ui segment">
        <p>Таблица среднесуточных значений режимных показателей котла №3</p>
        <table class="ui small table">
            <thead>
                <tr>
                    {% for col in tablek3.columns %}
                    <th>
                        {{ col }}
                    </th>
                    {% endfor %}
                </tr>
            </thead>
            {% for index, row in tablek3.iterrows %}
            <tr>
                {% for cell in row %}
                <td>
                    {{ cell }}
                </td>
                {% endfor %}
            </tr>
            {% endfor %}
        </table>    
    </div>
{% endblock %}

Screen 1 Screen 2 Screen 3

Ваш контент для проталкивания должен оставаться внутри div pusher. Однако в вашем текущем коде пользовательский контекстный div находится за пределами pusher div, что и вызывает проблему. Правильная структура страницы выглядит следующим образом

<body>
   <div class="ui sidebar menu"> your sidebar</div>
   <div class="ui top attached demo menu">your top menu
       <div class="item">Your sidebar trigger menu item</div>
   </div>
   <div class="pusher">
        <div class="ui bottom attached segment">
            your custom context div
        </div>
    </div>
    <script src="jquery.js"></script>
    <script src="semantic.min.js"></script>
    <script>
        $(".ui.sidebar")
        .sidebar({
          context: $(".bottom.segment"),
        })
        .sidebar("attach events", ".ui.top.attached.demo.menu .item")
    </script>
</body>

Ваш исправленный пример находится здесь: См. https://jsfiddle.net/lubber/r56b3p7z/30/

В примере на сайте документации это тоже неправильно, но в нем не так много содержимого, поэтому проблема там не видна.

Вернуться на верх