1.39 Element Spacing Issues

Using Streamlit
1

In 1.38 my state is using well, I use the following code to reduce the spacing of the content to the left and top

st.markdown(
    """
    <style>
    section.main > div {
    max-width:98rem;
    }
    .stApp .main .block-container{
        padding: 0rem;
        padding-top: 1.72rem;
    }
    .stApp [data-testid='stSidebar']>div:nth-child(1)>div:nth-child(2){
        padding-top: 0.5rem
    }
    img[data-testid="stLogo"] {
            height: 3.5rem;
    }
    .stRadio div[role='radiogroup']>label{
        margin-right:5px
        padding-top: 0.1rem
    }
    
    div[data-testid="stSidebarHeader"] {
  justify-content: center;
  align-items: start;
  height: 1px;
  padding: 1.2em;
  padding-left: 2.6rem;

}
    </style>
""",
    unsafe_allow_html=True,
)

In 1.39, the above code works, but it produces a strange problem, a new invisible content is generated at the top of the content and a placeholder is created, and after checking the element, it is found that there are 3 more stElementContainer element-container st-emotion-cache-3o8rbg e1f1d6gn4, which reads as follows:

<div width="986" class="stVerticalBlock st-emotion-cache-1vj91b0 e1f1d6gn2" data-testid="stVerticalBlock"><div class="stElementContainer element-container st-emotion-cache-sg72bn e1f1d6gn4" data-testid="stElementContainer" data-stale="false" width="986"><div class="stMarkdown" data-testid="stMarkdown" style="width: 986px;"><div data-testid="stMarkdownContainer" class="st-emotion-cache-1gb4o3g e1nzilvr5"><style>
    section.main > div {
    max-width:98rem;
    }
    .stApp .main .block-container{
        padding: 0rem;
        padding-top: 1.72rem;
    }
    .stApp [data-testid='stSidebar']>div:nth-child(1)>div:nth-child(2){
        padding-top: 0.5rem
    }
    img[data-testid="stLogo"] {
            height: 3.5rem;
    }
    .stRadio div[role='radiogroup']>label{
        margin-right:5px
        padding-top: 0.1rem
    }

    div[data-testid="stSidebarHeader"] {
  justify-content: center;
  align-items: start;
  height: 1px;
  padding: 1.2em;
  padding-left: 2.6rem;

}
    </style></div></div></div><div class="stElementContainer element-container st-emotion-cache-sg72bn e1f1d6gn4" data-testid="stElementContainer" data-stale="false" width="986"><div class="stMarkdown" data-testid="stMarkdown" style="width: 986px;"><div data-testid="stMarkdownContainer" class="st-emotion-cache-1gb4o3g e1nzilvr5"><style>div[role="listbox"] ul {
 background-color: #ffffff;
}

div[data-baseweb="select"] > div {
 background-color: #ffffff;
}

div[data-baseweb="input"] > div {
 background-color: #ffffff;
}

/* 
.st-emotion-cache-ocqkz7 { 
border: 1px solid #e0e0e0 !important;
border-radius: 10px !important; 
padding: 15px !important; 
}  */

.stSelectbox div[data-baseweb="select"] > div:first-child {
            background-color: #FFFFFF;
            border-color: #6a7473;
        }

.stMultiSelect div[data-baseweb="select"] > div:first-child {
            background-color: #FFFFFF;
            border-color: #6a7473;
        }

.st-af {
    border-color: #6a7473; 
}

.st-emotion-cache-kskxxl {
    border-color: #6a7473; 
}

.st-emotion-cache-76z9jo e116k4er2 {
    background-color: #FFFFFF;
}

.st-emotion-cache-zbmw0q {
    background-color: #FFFFFF;
}

.st-emotion-cache-0 e1f1d6gn0 {
    background-color: #FFFFFF !important;
}

/* .pvtFilterBox {
    background-color: #FFFFFF;
} */

/* html, body, [class*="css"] {
    font-family: 'Cabin', sans-serif; 
    font-size: 14px;
    font-weight: 500;
    color: #091747;
} */

.test-test {
    background-color: #f1f0ef !important;
}</style></div></div></div><div class="stElementContainer element-container st-emotion-cache-3o8rbg e1f1d6gn4" data-testid="stElementContainer" data-stale="false" width="986"><div class="stEmpty" data-testid="stEmpty"></div></div><div class="stHorizontalBlock st-emotion-cache-ocqkz7 e1f1d6gn5" data-testid="stHorizontalBlock"><div class="stColumn st-emotion-cache-1b2d4l5 e1f1d6gn3" data-testid="stColumn"><div data-testid="stVerticalBlockBorderWrapper" data-test-scroll-behavior="normal" class="st-emotion-cache-0 e1f1d6gn0"><div class="st-emotion-cache-1wmy9hl e1f1d6gn1"><div width="128.0625" ........

Is there a way to maintain the page layout in 1.38 in version 1.39? I don’t know much about CSS, in fact the previous CSS is a workaround found in the forums

2

CSS modification isn’t officially supported, so classes may change at any time. :upside_down_face:

This last release included a refactoring of the frontend classes for consistency: Refactor frontend styles, class names and test-ids - Part 4 by lukasmasuch · Pull Request #9320 · streamlit/streamlit · GitHub

If you look at the PR, you can see what labels were replaced. However, not all of the changes are simple name changes. You’ll need to replace the class selector .main with [data-testid='stMain'], from what I can see at a glance.

1.38 also included some changes to styling, but I think from 1.38 to 1.39, it’s mostly that one PR.

3

Thank you very much for your help, now I have reverted to the 1.38 style by replacing .main with [data-testid=‘stMain’];
I would like to ask a question, in the content on the right, there is a lot of placeholder in the top of the element, is there a suitable way to hide this element or reduce the height? I’ve tried a lot of things and nothing worked, and I didn’t find a workaround in the forums, anyway, thanks for your help

4

I’m not sure what you mean. Can you share some code and a picture?