When the page is fully loaded, the visibility of the content is cut-off
In the first option - page loading mode - this is if you interrupt it at the loading stage and not completely. The page is not completely loaded. In this case - option - all the content is displayed in the browser - the content that has time to load is loaded accordingly - which had time to load before the interruption.
In the second option - page loading - this is if you do not interrupt the loading and the loading is complete. All the content on the page is completely loaded. But at the moment - immediately upon complete loading - there is a cut-off - a reduction in the visibility of the content - you cannot fully view the - seemingly fully loaded page. The content is cut-off.
It is possible that something is not working somewhere. Could this be - is it because of the side menu?
I'm trying to create a shell for Django Python. And I have a strange thing - visibility - content availability is limited. Although everything seems to load when loading - but then when fully loaded for some reason - there is a limitation - there is no scrolling of all the contents. Maybe you can find out why this is happening to me.
When the page is fully loaded, the visibility of the content is cut-off.
Help please.
This code after the page is fully loaded - limits part of the page - template.
The effect of this code is to limit access to content and does not allow viewing content beyond what is visible on the screenshot - as if it is cut off and there is nothing beyond one diagram - although a lot of things are loaded during loading - and at the end there is a limitation of cutting.
When it is removed, everything loads normally - but the button for activating the menu call is not active - at the top left.
https://fomantic-ui.com/modules/sidebar.html#/examples
This code after the page is fully loaded - limits part of the page - template.
// 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/jquery@3.7.1/dist/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.3/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/fomantic-ui@2.9.3/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/jquery@3.7.1/dist/jquery.min.js"></script>
</body>
</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 %}
On the first screenshot you can see - that I can't scroll further - to see the content.
I can't see the content - scroll the scroll on the right side - something is limiting the displayed content on the page.
On the right - you can see the scroll - on the screenshots - you can see the difference between what the content should be - it should all be visible.
But on the first screenshot you can see - what the page display actually is - what it is in fact now.