Read column width and height

[zhiyuanpeng]

Summary

I can split the screen into columns by:

col1, col2, col3 = st.columns([2, 4, 2])

In col2, I need to show a graph by calling python package pyvis and when create a graph, width and height pixel are grauments for pyvis. How can I read the current width and height pixel of col2, so that the graph can fit the screen no matter what the device is.

Links

• Link to your GitHub repo:
• Link to your deployed app: https://interactivepgm.streamlit.app/

Expected Behavior

No matter how you resize the window, the relative locations of the three columns are fixed and the contents are fixed within the columns.

[IM45145V]

Can you give code sample?

[ilovetensor]

Hey @zhiyuanpeng , I looked at your website and here is a small fix that can work for you… and for this you also dont need to calculate the width of columns every time …

I read your html in inspect mode and so, the width of container inside center column can be set to inherit and it will always be of the same size as of the center column.

So you can add the following snippet into your code on top of every thing …

    st.markdown(f"""
      <style>
      iframe {{
          width: inherit;
      }}
      </style>
    """
    , unsafe_allow_html=True)

I hope this should work for you…

[zhiyuanpeng]

Hi ilovetensor,

@ilovetensor Thanks for your solution. I update the website and currently the contents of three column will not overlap if the window size changes. But I still need to read the current column width as the width is an argument for pyvis when creating a graph:

import streamlit as st
from pyvis.network import Network
import networkx as nx
import pickle
from os.path import exists
import json
from ast import literal_eval
import pprint


def create_pgm_from_pickles(nt_file: str, nx_file: str, pgm_type: str,
                            h: str, w: str, hier: bool):
    """
    load pgm from pickles if pickle file exists
    :param nt_file: pickle file of nt_pgm
    :param nx_file: pickle file of nx_pgm
    :param pgm_type: Directed or Undirected
    :param h: height
    :param w: width
    :param hier: hiericial or not
    :return: return the nt and nx pgm. nx pgm communicate with UI. nt is to
    show pgm
    """
    if exists(nt_file) and exists(nx_file):
        return (pickle.load(open(nt_file, "rb")), pickle.load(open(nx_file,
                                                                   "rb")))
    else:
        return (Network(directed="True", height=h, width=w, layout=hier),
                nx.DiGraph()) if pgm_type == "Directed" else \
            (Network(height=h, width=w, layout=hier), nx.Graph())

Currently, I set width 900 and it looks good for my 25-inch screen, but on bigger screen like 28-inch, there should be a gap between the graph and the right column. Do you know how I can fix it? Thanks a lot!

[ilovetensor]

Now also you can do a small fix… …

Set your width according to the 28 inch or any other highest possible screen ratio, and it will automatically work for other smaller screens.