Skip to content

Plots overflowing with st.tabs #9

@nick-robo

Description

@nick-robo

Recently, plots have started overflowing from the containers and are cut off when used with st.tabs.

If placed inside an expander, the sizing works correctly.

It doesn't always break, but swapping the order of the tabs seems to trigger the bug.

Minimal Example

from random import choices
import streamlit as st
from streamlit_plotly_events import plotly_events
import pandas as pd
import plotly_express as px


st.title("Minimal Example")

n = 1000

letters = ["aaaaaa", "bbbbbbbbbbbbbb", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l"]

first, second = st.tabs(["First", "Second"])

with first:
    st.write("Tabs seems to sometimes break the plot layout.")

with second:
    data = pd.DataFrame.from_dict(
        {
            "Name": choices(letters, k=n),
            "Cool": choices(["Very Much So", "Not Very", "Undoubtedly"], k=n),
        }
    )

    plot = px.bar(data, "Name", color="Cool", template="plotly_dark")

    with st.container():
        selected = plotly_events(plot)

Screenshot of broken layout:
image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions