How to set text width to column in Streamlit

user_13014274 0
Viewed 1844

I just started creating an app with Streamlit and have a problem, that the text does not comply with container (column) width:

sequences = []
labels = ["first", "second"]
with st.form(key="fasta_dropdown"):
    f_cols = st.columns(2)
    for i, col in enumerate(f_cols):
        id = col.selectbox(
            f"Select {labels[i]} FASTA", fasta_df["ID"], key=i
        )
        seq = get_sequence_by_id(fasta_df, id)
        sequences.append(seq)
        with col.expander(label="View sequence"):
            st.markdown("""
            MVLSEGEWQLVLHVWAKVEADVAGHGQDILIRLFKSHPETLEKFDRFKHLKTEAEMK
           ASEDLKKHGVTVLTALGAILKKKGHHEAELKPLAQSHATKHKIPIKYLEFISEAIIHV
            LHSRHPGNFGADAQGAMNKALELFRKDIAAKYKELGYQG
            """
            )

    dropdown_submit = st.form_submit_button("Apply sequences")

How can I fix that? Putting the text into HTML formatting with style="width: 10%" does not change anything.

streamlit python
1 Answers

You can use the CSS property word-wrap:break-word;, which will break words if they are too long for your width.

Code:

st.markdown("""<span style="word-wrap:break-word;">MVLSEGEWQLVLHVWAKVEADVAGHGQDILIRLFKSHPETLEKFDRFKHLKTEAEMK
            ASEDLKKHGVTVLTALGAILKKKGHHEAELKPLAQSHATKHKIPIKYLEFISEAIIHV
            LHSRHPGNFGADAQGAMNKALELFRKDIAAKYKELGYQG</span>""", unsafe_allow_html=True)

Example:

import streamlit as st

col1, col2 = st.columns(2)

col1.subheader("Col 1")
col1.markdown("""<span style="word-wrap:break-word;">MVLSEGEWQLVLHVWAKVEADVAGHGQDILIRLFKSHPETLEKFDRFKHLKTEAEMK
                ASEDLKKHGVTVLTALGAILKKKGHHEAELKPLAQSHATKHKIPIKYLEFISEAIIHV
                LHSRHPGNFGADAQGAMNKALELFRKDIAAKYKELGYQG</span>""", unsafe_allow_html=True)

col2.subheader("Col 2")
col2.markdown("""<span style="word-wrap:break-word;">MVLSEGEWQLVLHVWAKVEADVAGHGQDILIRLFKSHPETLEKFDRFKHLKTEAEMK
                ASEDLKKHGVTVLTALGAILKKKGHHEAELKPLAQSHATKHKIPIKYLEFISEAIIHV
                LHSRHPGNFGADAQGAMNKALELFRKDIAAKYKELGYQG</span>""", unsafe_allow_html=True)

Output:

Output

user_105026190
Related