由于页面模板完全加载后菜单激活而导致页面限制

问题描述 投票：0回答：1

在第一个选项 - 页面加载模式 - 这是如果您在加载阶段中断它而不是完全中断。页面未完全加载。在这种情况下 - 选项 - 所有内容都显示在浏览器中 - 有时间加载的内容相应加载 - 在中断之前有时间加载。

在第二个选项 - 页面加载 - 这是如果你不中断加载并且加载完成。页面上的所有内容均已完全加载。但目前 - 完全加载后 - 会出现中断 - 内容可见性降低 - 您无法完全查看 - 看似已完全加载的页面。内容已被截断。

有可能某些地方不起作用。这可能是 - 是因为侧边菜单的原因吗？

我正在尝试为 Django Python 创建一个 shell。我有一个奇怪的事情 - 可见性 - 内容可用性是有限的。虽然加载时似乎一切都已加载 - 但当由于某种原因完全加载时 - 存在限制 - 没有滚动所有内容。也许你可以找出为什么这会发生在我身上。

当页面完全加载时，内容的可见性被切断。

请帮忙。

页面完全加载后的此代码 - 限制页面的部分内容 - 模板。

这段代码的作用是限制对内容的访问，不允许查看超出屏幕截图可见的内容——就好像它被切断了，除了一张图之外什么也没有——尽管加载过程中加载了很多东西——最后还有切割的限制。

删除后，一切都会正常加载 - 但用于激活菜单调用的按钮未激活 - 位于左上角。

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

{% load static %}
{% load widget_tweaks %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sidebar Menu | Side Navigation Bar</title>
    <!-- CSS -->
    <!-- You MUST include jQuery 3.4+ before Fomantic -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
  </head>
  <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
    <div class="ui top attached demo menu">
      <a class="item">
        <i class="sidebar icon"></i>
        Menu
      </a>
    </div>
    <div class="ui bottom attached segment">
      <div class="ui labeled icon left inline vertical demo sidebar menu">
        <a class="item">
          <i class="home icon"></i>
          Home
        </a>
        <a class="item">
          <i class="block layout icon"></i>
          Мониторинг
        </a>
        <a class="item">
          <i class="smile icon"></i>
          Анализ архива
        </a>
        <a class="item">
          <i class="calendar icon"></i>
          History
        </a>
      </div>
      <div class="pusher">
        <div class="ui basic segment">
          <h3 class="ui header">Application Content</h3>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <div class="ui grid">
            <div class="six wide column">
              Menu Text
              <div class="ui hidden divider"></div>
              <div class="ui vertical menu">
                <div class="item">
                  <div class="ui input"><input type="text" placeholder="Search..."></div>
                </div>
                <div class="item">
                  Home
                  <div class="menu">
                    <a class="active item">Search</a>
                    <a class="item">Add</a>
                    <a class="item">Remove</a>
                  </div>
                </div>
                <a class="item">
                  <i class="grid layout icon"></i> Browse
                </a>
                <a class="item">
                  Messages
                </a>
                <div class="ui dropdown item">
                  More
                  <i class="dropdown icon"></i>
                  <div class="menu" id="courses_id">
                    <a class="item"><i class="edit icon"></i> Edit Profile</a>
                    <a class="item"><i class="globe icon"></i> Choose Language</a>
                    <a class="item"><i class="settings icon"></i> Account Settings</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="ten wide column" style="text-align: center;">
              Content Text
              <div class="ui hidden divider"></div>
              <div class="ui fluid selection dropdown">
                <input type="hidden" name="user">
                <i class="dropdown icon"></i>
                <div class="default text">Select Friend</div>
                <div class="menu">
                  <div class="item">
                    Jenny Hess
                  </div>
                  <div class="item">
                    Elliot Fu
                  </div>
                  <div class="item">
                    Stevie Feliciano
                  </div>
                  <div class="item">
                    Christian
                  </div>
                  <div class="item">
                    Matt
                  </div>
                </div>
              </div>
              <div class="ui hidden divider"></div>
              {% block content %}

              {% endblock %}
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
    <script>
      // using context
      $('.ui.sidebar')
        .sidebar({
          context: $('.bottom.segment')
        })
        .sidebar('attach events', '.ui.top.attached.demo.menu .item')
      ;
      $('.ui.dropdown').dropdown();
      $('.ui.selection.dropdown')
        .dropdown({
          clearable: true
        })
      ;
    </script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
  </body>
</html>

内容.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

javascript html jquery django templates
1个回答
0
投票

您要推送的内容需要保留在 

pusher
div 内。然而，您当前的代码自定义上下文 div 位于推送器 div 之外，这会导致问题 将推动器 div 移到 
ui top attached demo menu
之后并滚动即可工作 请参阅https://jsfiddle.net/lubber/r56b3p7z/16/

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.