Placing section at edge of screen using columns

🎈 Using Streamlit
,
1

Hey all i’m just wondering how i can place a section right at the edge of the screen

image
image1908×840 47.1 KB

It’s the list of stories right underneath saved stories in the picture i want it at the edge of the screen on the left.

here’s my code right now

with col2:
    selected=option_menu(
    menu_title=None,
    options=["Search", "Saved stories"],
    orientation="horizontal",
)
if selected =="Search":

    choice=st.selectbox(label="choose category", options=["tech", "sports", "business"])
    st.write('You selected:', choice)

    if choice == "tech":
        data=parseRSS('https://rss.app/feeds/6BJraU9Ff0IeqC3c.xml')
    elif choice == "sports":
        data=parseRSS('https://rss.app/feeds/gG8cdlMkSCCQeYfy.xml')
    elif choice == "business":
        data=parseRSS("https://rss.app/feeds/qYEIAK4I1h43dPec.xml")

    # data.style.set_properties(**{'background-color': 'black',
    #                            'color': 'green'})
    


    


    #creating a column to hold the combined strings
    data['important_features']=get_important_features(data)



    tfidf = text.TfidfVectorizer( stop_words="english")
    tfidf_matrix = tfidf.fit_transform(data['important_features'])



    cosine_sim = linear_kernel(tfidf_matrix, tfidf_matrix)


    def news_recommendation2(Title, cosine_sim=cosine_sim):
        indices = pd.Series(data.index,data['important_features']).drop_duplicates()

        index = indices[indices.index.str.contains(Title)]
        
        if index.empty:
            
            
            lowIndices = indices.copy()
        
            lowIndices.index = lowIndices.index.str.lower()
        

            index = lowIndices[lowIndices.index.str.contains(Title)]
            if index.empty:
                
                 newslink = data[['title', 'link']]
                 recommend = newslink
                # recommend=st.data_editor(
                # recommend,
                # column_config={
                # "link": st.column_config.LinkColumn()
                #  },
                # hide_index=True,
                # )
                # return recommend
            else:
                newslink = data[['title', 'link']]
                for j in index:
                
                    similarity_scores = list(enumerate(cosine_sim[j]))
                    
                    similarity_scores = sorted(similarity_scores,key=lambda x: x[1],reverse=True)
                    similarity_scores = similarity_scores[0:30]
                    
                    newsindices = [i[0] for i in similarity_scores]
                    recommend = newslink.iloc[newsindices]
                #  recommend=st.data_editor(
                #  recommend,
                #  column_config={
                # "link": st.column_config.LinkColumn()
                #  },
                #  hide_index=True,
                # )
            
                return recommend
        else:
            newslink = data[['title', 'link']]
            
            for j in index:
            
                similarity_scores = list(enumerate(cosine_sim[j]))
                
                similarity_scores = sorted(similarity_scores,key=lambda x: x[1],reverse=True)
                similarity_scores = similarity_scores[0:30]
                
                newsindices = [i[0] for i in similarity_scores]
                recommend = newslink.iloc[newsindices]
            
            
        
            return recommend
        
    def addStory(title,link):
        new_row = {'title': title, 'link': link}
        st.session_state['story_list'].loc[len(st.session_state['story_list'])] = new_row






    entered_title = st.text_input("Enter:")

    is_clicked = st.button(label="Recommend")


    if "load_state" not in st.session_state :
        st.session_state.load_state=False
    if is_clicked or st.session_state.load_state:
        st.session_state.load_state=True
    st.write("Recommendations:")
    recommendations2 = news_recommendation2(entered_title)
    #    st.data_editor(
    #          recommendations2,
    #             column_config={
    #             "link": st.column_config.LinkColumn("Article Link")
    #             },
    #             hide_index=True,
    #             )
    #st.table(recommendations2)
    if recommendations2 is None:
        st.write('no recs')
    else:
        i=0
        for index, row in recommendations2.iterrows():
            
            title=row['title']
            link = row['link']
            st.markdown(f"[{title}]({link})")
            if st.button(label="Add", key=i):
                    addStory(title,link)
                
        
            i=i+1
            st.write("  \n")
            st.write("  \n")
    with col1:
        st.write('Saved stories')
        for index, row in st.session_state['story_list'].iterrows():
                
            title=row['title']
            link = row['link']
            st.markdown(f"[{title}]({link})")

right now i’ve got the list of saved stories in column1 and everything else in column 2 but it’s right next to each other. So how can i get the saved stories to the left edge of the screen thanks

2

Hi @Jreid01,

Thanks for sharing this question!

You may need to adjust the layout of your Streamlit columns to get the look you’re going for using column width controls, for example:

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

The st.columns([1, 4]) creates two columns with a 1:4 width ratio, where col1 is much narrower than col2 .

This should push col1 to the left side of the screen. Feel free to adjust the ratio as needed to achieve the desired layout and let me know if this works.