Page limitation due to menu activation after the page - template has fully loaded

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')
      ;

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.

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 %}

Good day!

Thank you very much.

I am currently in a difficult period of my life and an attempt to develop some mini-project means a lot to me.

I plan to study theoretical knowledge more deeply from November.

I really miss the ability to fix the side element – I am trying different options but I have not succeeded yet.
I am trying to make the left element or only the vertical menu or part of it fixed (
-"six wide column" – "ui sticky" – "ui vertical menu"-).
I tried through – "ui sticky" – but everything is very difficult there – maybe I am trying to do something wrong.

https://fomantic-ui.com/modules/sticky.html#/usage

I will be very grateful for help.

{% 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 -->
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.3/dist/semantic.min.css"
    />
    <style>
      /* FUI fix for jsfiddle */
      .ui.ui.visible.left.sidebar ~ .pusher {
        transform: translate3d(85.8097px, 0, 0);
      }
      .ui.unlimited.scrolling.segment {
        max-height: calc(100% - 3em); /* 3em is the top menu height*/
      }
      .ui.ui.native.sticky {
        position: sticky;
      }
      /* sticky ths sidebar inside the segment as well */
      .ui.native.sticky.sidebar + .pusher {
        top: 0;
        position: absolute;
        width: 100%;
      }
      .ui.ui.pusher.basic.ui.six.column {
        position: sticky;
      }
    </style>

  </head>
  <body hx-headers="{"X-CSRFToken": "{{ csrf_token }}"}">
    <div class="ui attached native sticky demo menu">
      <a class="item">
        <i class="sidebar icon"></i>
        Menu
      </a>
    </div>
    <div class="ui bottom attached unlimited scrolling segment">
      <div class="ui labeled icon left inline vertical native sticky demo sidebar menu">
        <a class="item">
          <i class="home icon"></i>
          Home
        </a>
        <a class="item">
          <i class="block layout icon"></i>
          Topics
        </a>
        <a class="item">
          <i class="smile icon"></i>
          Friends
        </a>
        <a class="item">
          <i class="calendar icon"></i>
          History
        </a>
      </div>
      <div class="pusher">
        <div class="ui basic segment" id="example1">
          <h3 class="ui header">Application Content</h3>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <div class="ui grid">
            <div class="six wide column" id="columnrail">
              <div class="ui sticky">
                Menu Text
                <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>
            <div class="ten wide column" id="context" style="text-align: center">
              Content Text<br />Content Text<br />Content Text<br />Content
              Text<br />Content Text<br />Content Text<br />Content Text<br />Content
              Text<br />Content Text<br />Content Text<br />Content Text<br />Content
              Text<br />Content Text<br />Content Text<br />Content Text<br />Content
              Text<br />Content Text<br />Content Text<br />Content Text<br />Content
              Text<br />Content Text<br />Content Text<br />Content Text<br />Content
              Text<br />Content Text<br />Content Text<br />Content Text<br />Content
              Text<br />Content Text<br />Content Text<br />Content Text<br />Content
              Text<br />Content Text<br />Content Text<br />Content Text<br />Content
              Text<br />Content Text<br />Content Text<br />Content Text<br />Content
              Text<br />Content Text<br />Content Text<br />Content Text<br />Content
              Text<br />Content Text<br />Content Text<br />Content Text<br />Content
              Text<br />Content Text<br />Content Text<br />Content Text<br />Content
              Text<br />Content Text<br />Content Text<br />Content Text<br />Content
              Text<br />Content Text<br />Content Text<br />Content Text<br />Content
              Text<br />Content Text<br />Content Text<br />Content Text<br />Content
              Text<br />Content Text<br />Content Text<br />Content Text<br />Content
              Text<br />Content Text<br />Content Text<br />Content Text<br />Content
              Text<br />Content Text<br />Content Text<br />Content Text<br />Content
              Text<br />Content Text<br />Content Text<br />Content Text<br />Content
              Text<br />Content Text<br />Content Text<br />Content Text<br />Content
              Text<br />Content Text<br />Content Text<br />Content Text<br />Content
              Text<br />Content Text<br />Content Text<br />Content Text<br />Content
              Text<br />Content Text<br />Content Text<br />Content Text<br />Content
              Text<br />Content Text<br />Content Text<br />Content Text<br />Content
              Text<br />Content Text<br />Content Text<br />Content Text<br />Content
              Text<br />Content Text<br />Content Text<br />Content Text<br />Content
              Text<br />Content Text<br />Content Text<br />Content Text<br />Content
              Text<br />Content Text<br />Content Text<br />Content Text<br />Content
              Text<br />Content Text<br />Content Text<br />Content Text<br />Content
              Text<br />Content Text<br />Content Text<br />
              LAST LINE
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <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.attached.demo.menu .item")
      $(".ui.dropdown").dropdown()
      $('.#columnrail.sticky')
        .sticky({
          context: '#context'
        })
      ;
    </script>
  </body>
</html>

You need to sign in to view this answers

About Us

Categories

Android

C#

C++

CSS

GPL

HTML

Contact Info

Page limitation due to menu activation after the page – template has fully loaded

Leave feedback about this Cancel Reply

PROS

CONS

Categories

Android

C#

C++

CSS

GPL

HTML

java

javascript

jQuery

Node.js

pdf

PHP

Recent Posts

Postgres drop type XX000 “cache lookup failed for type”

PostgreSQL how to merge rows where some fields match and others are null

About Us

Categories

Android

C#

C++

CSS

GPL

HTML

Contact Info

Follow Us

Page limitation due to menu activation after the page – template has fully loaded

Share This Post:

Leave feedback about this Cancel Reply

PROS

CONS

Related Post

Android

C#

C++

CSS

GPL

HTML

java

javascript

jQuery

Node.js

pdf

PHP