How to fix st.popover() button height width (See screenshot and code)

[pk367]

I have done some stock analysis and print this analysis using st.column()

In the output of code Chart Column popover button visible large in height i want to make it small so it don’t affect the column and row structure. and it should be aline with corresponding row

In the given screenshot of my code output you can see chart column popover element going to output of the row bound , how to fix it

here is code part of chart column

 # Display the DataFrame table with popover buttons aligned with symbol names
            # Add header names
            col1 = st.empty()
            col2 = st.empty()
            col3 = st.empty()
            col4 = st.empty()
            col5 = st.empty()
            col6 = st.empty()
            col7 = st.empty()
            col8 = st.empty()
            col9 = st.empty()
            col10 = st.empty()
            col11 = st.empty()

            col1, col2, col3, col4, col5, col6, col7, col8, col9, col10, col11 = st.columns([14,14,11,21,14,21,21,21,21,7,21])
            # Display column names in bold
            col1.markdown("**Symbol**")
            col2.markdown("**Close**")
            col3.markdown("**Zone**")
            col4.markdown("**Leg-in Date**")
            col5.markdown("""<span title="BC Stand for Base Count , This is number between legin candle and legout candle"> **BC** </span>""", unsafe_allow_html=True)
            col6.markdown("**Leg-out Date**")
            col7.markdown("**Legout Count**")
            col8.markdown("**Proximal Line**")
            col9.markdown("**Distal Line**")
            col10.markdown("""<span title="TF Stand for Time Frame , This is Chart time for analysing stock to find zone">  **TF** </span>""", unsafe_allow_html=True)
            col11.markdown("**Chart**")
            
            for index, row in df.iterrows():
                try:
                    legin_date = pd.to_datetime(row['Leg-in Date'])
                    legout_date = pd.to_datetime(row['Leg-out Date'])

                    start_date = (legin_date - pd.Timedelta(days=10)).strftime('%Y-%m-%d')
                    end_date = datetime.datetime.now().strftime("%Y-%m-%d")
                    with col1:
                        st.write(row['Symbol'])
                            
                    with col2:
                        st.write(row['Close'])
                        
                    with col3:
                        st.write(row['Pattern'])
                        
                    with col4:
                        st.write(row['Leg-in Date'])
                        
                    with col5:
                        st.write(row['Base Count'])
                        
                    with col6:
                        st.write(row['Leg-out Date'])
                        
                    with col7:
                        st.write(row['Legout Count'])

                    with col8:
                        st.write(row['Proximal Line'])

                    with col9:
                        st.write(row['Distal Line'])

                    with col10:
                        st.write(row['Time Frame'])
                    with col11:
                        with st.popover(f"📊"):
                              plot_candlestick(stock_data.loc[start_date:end_date], row['Symbol'], start_date, end_date, legin_date, legout_date)
                        
                        
                except Exception as e:
                    st.error(f"Error occurred while processing {row['Symbol']}: {e}")

if __name__ == "__main__":
    main()

[lkdd-ao]

Fortunately, I can answer this. Please place the following code at the head of the script.

# Customize min-height and height
st.html(
    '''
        <style>
            div[data-testid="stPopover"]>div>button {
                min-height: 32.4px;
                height: 32.4px;
            }
        </style>
    '''
)

[pk367]

Thank you so much dear @lkdd-ao
It’s works perfectly for me. love you from India

If you give me answer of one more question it will very helpful for me. My question is can we add st.popover() in st.dataframe() table . if yes then how, could you pls send me demo code for adding st.popover() in dataframe column

[lkdd-ao]

Unfortunately, st. popover() cannot be added to st. dataframe(). Personally, I understand that adding pop-up windows to a table is a very complex feature, but it is not ruled out that the official streamlit team will plan this in the future, as streamlit is still growing rapidly. Let’s look forward to it together! (ง •_•)ง

[pk367]

Dear @lkdd-ao , I have new issue related code output layout and structure

when I running my code and see output in desktop steamlit cloud plateform , table column structure is ok but when I am moving to mobile and see output it is different here , In the mobile view table column are not properly expanding and limited to input Field right and left border area , I will attach screenshot of both screen , you can see what the actual issue 'also I will share my code part which is responsible for taking user input and printing table column
here is two code snippet . 1st is for user input and second is for printing table column

    user_input_option = st.selectbox("Select demand zone Scan Option", ["Enter custom stock symbols", "Select niftystocks"])

    col1, col2 = st.columns(2)

    with col1:
        if user_input_option == "Enter custom stock symbols":
            user_selected_companies = st.text_input("Symbol Names", help="Enter Indian stock symbol names separated by space. For example: 'TCS INFY HDFC'.")
            max_base_candles = st.number_input("Maximum Base Candles", min_value=1, value=2, help="Enter the maximum number of base candles to consider. Default value is 2.")

            if user_selected_companies:
                companies_list = user_selected_companies.split()
                companies_with_ns_suffix = add_ns_suffix(companies_list)

            else:
                companies_with_ns_suffix = []
        elif user_input_option == "Select niftystocks":
            selected_file = st.selectbox("Select niftystocks", ["nifty50stocks", "nifty100stocks", "nifty500stocks"])
            max_base_candles = st.number_input("Maximum Base Candles", min_value=1, value=2, help="Enter the maximum number of base candles to consider. Default value is 2.")

            if selected_file:
                user_selected_companies = read_company_names_from_file(selected_file)
                companies_with_ns_suffix = add_ns_suffix(user_selected_companies)
            else:
                companies_with_ns_suffix = []
        else:
            companies_with_ns_suffix = []

        # Add the following line to track button click status
        patterns_found_button_clicked = False

    with col2:
        if user_input_option in ["Enter custom stock symbols", "Select niftystocks"]:
            time_frames_input = st.text_input("Time Frames", "1d", help="For single time frames, enter one time frame (e.g., '1d'). For multiple time frames, enter them separated by space (e.g., '1d 1wk 1mo').")
            time_frames = [tf.strip() for tf in time_frames_input.split()]
            displayed_patterns_number = st.number_input("Max Demand Zone", min_value=1, value=1, help="Enter the maximum number of demand zones to find in each stock. The default value is 1.")
    
    find_patterns_button = None
    if user_input_option in ["Enter custom stock symbols", "Select niftystocks"]:
            find_patterns_button = st.button("Find Patterns")
            
            # Update the condition to check if the button has been clicked
            if find_patterns_button and companies_with_ns_suffix:
                patterns_found_button_clicked = True

                start_time = time.time()
                patterns_found = []
                for company in companies_with_ns_suffix:
                    patterns = find_demand_zone_legin_base_legout_pattern(company, "2020-01-01", datetime.datetime.now().strftime("%Y-%m-%d"), max_base_candles, time_frames)
                    if patterns:
                        patterns_found.extend(patterns)

2nd code snippet which print table column

                # Add header names
                col1 = st.empty()
                col2 = st.empty()
                col3 = st.empty()
                col4 = st.empty()
                col5 = st.empty()
                col6 = st.empty()
                col7 = st.empty()
                col8 = st.empty()
                col9 = st.empty()
                col10 = st.empty()
                col11 = st.empty()

                col1, col2, col3, col4, col5, col6, col7, col8, col9, col10, col11 = st.columns([14,14,11,21,14,21,21,21,21,7,21])

                # Display column names in bold
                col1.markdown("**Symbol**")
                col2.markdown("**Close**")
                col3.markdown("**Zone**")
                col4.markdown("**Leg-in Date**")
                col5.markdown("""<span title="BC Stand for Base Count , This is number between legin candle and legout candle"> **BC** </span>""", unsafe_allow_html=True)
                col6.markdown("**Leg-out Date**")
                col7.markdown("**Legout Count**")
                col8.markdown("**Proximal Line**")
                col9.markdown("**Distal Line**")
                col10.markdown("""<span title="TF Stand for Time Frame , This is Chart time for analysing stock to find zone">  **TF** </span>""", unsafe_allow_html=True)
                col11.markdown("**Chart**")

                with st.container():
                    for index, row in df.iterrows():
                        try:
                            legin_date = pd.to_datetime(row['Leg-in Date'])
                            legout_date = pd.to_datetime(row['Leg-out Date'])

                            start_date = (legin_date - pd.Timedelta(days=10)).strftime('%Y-%m-%d')
                            end_date = datetime.datetime.now().strftime("%Y-%m-%d")
                            with col1:
                                st.write(row['Symbol'])

                            with col2:
                                st.write(row['Close'])

                            with col3:
                                st.write(row['Pattern'])

                            with col4:
                                st.write(row['Leg-in Date'])

                            with col5:
                                st.write(row['Base Count'])

                            with col6:
                                st.write(row['Leg-out Date'])

                            with col7:
                                st.write(row['Legout Count'])

                            with col8:
                                st.write(row['Proximal Line'])

                            with col9:
                                st.write(row['Distal Line'])

                            with col10:
                                st.write(row['Time Frame'])
                            with col11:
                                with st.popover(f"📊"):
                                    plot_candlestick(stock_data.loc[start_date:end_date], row['Symbol'], start_date, end_date, legin_date, legout_date)


                        except Exception as e:
                            st.error(f"Error occurred while processing {row['Symbol']}: {e}")

if __name__ == "__main__":
    main()

Now here is screent shot of code output in laptop which is looking correct as per my requirement

Now here is screentshot of code output in Mobile screeen desktop mode which is not looking correct as per my requirement , because table columns are not expanded correctly

[mathcatsand]

The way columns are defined is by relative proportion of the total width. There isn’t enough room on mobile to expand them any further. If you want horizontal scrolling, you might try showing your information with a dataframe instead. Dataframe elements have internal scrolling.

Streamlit 1.35.0 has introduced row selections for dataframes, so you can show a chart associated with a selected row. This might be an alternative to having a popover button within a grid of data itself.

[lkdd-ao]

Sorry, I haven’t found a solution yet, but as the official said, Dataframe is more suitable for presentation on mobile devices. If interaction is needed, consider using cards.