Remove or hide the anchor (link icon) particularly when using st.markdown to inject CSS

Using Streamlit
, , , ,
1

Hello,

I suspect many of you have noticed the anchor / link icon next to, for example, text when using the st.markdown component. With other components, like st.title() I believe this can be hidden but not with st.markdown(). Any idea when this will be available or is there a resonable workaround for this issue? It does not look lke a very popular feature, not sure why is there in the first place.

I built a custom component for a custom scorecard using stayable containers with st.markdown and looks the way I want it, except for the fact that the title/text is slightly to the left because, when centering the text, it accounts for this annoying anchor icon and I do not know how to remove it…

2

You can add some custom CSS to remove them, like this:

import streamlit as st

st.markdown("""
# Hello
## These
### Are
#### Markdown headers
""")

st.html("<style>[data-testid='stHeaderActionElements'] {display: none;}</style>")
3

Hello blackary,

Thank you for the quick reply, I will try it and get back to you…

4

I was able to get rid of the paper clip anchor by using st.html() instead of st.markdown(). I will include below the code to create a customizable scorecard that fixed this problem with an example:

                    with st.container():
                        def custom_scorecard(
                            title,
                            value,
                            delta_val=None,
                            title_color="#000000",
                            value_color="#000000",
                            delta_color_pos="green",
                            delta_color_neg="red",
                            bg_light_color1="#3374A3",
                            bg_dark_color1="#174C7E",
                            title_font_size="1rem",
                            value_font_size="1.5rem",
                            delta_font_size="0.875rem",
                            border_radius="10px",
                            heading="h4",
                            border=True,
                            height=160,  # Default with Delta is 160, otherwise you may use 124
                            num_decimals=2,  # Specifies the number of decimals for non-formatted numbers
                            value_format="plain",  # Can be 'currency', 'percentage', or 'plain' for no specific format
                        ):
                            # Formatting the value based on the specified format
                            if value_format == "currency":
                                value_formatted = f"${value:,.{num_decimals}f}"
                            elif value_format == "percentage":
                                value_formatted = f"{value:.{num_decimals}f}%"
                            else:  # Default 'plain' formatting with specified decimals
                                value_formatted = f"{value:,.{num_decimals}f}"

                            delta_html = ""
                            if delta_val is not None and delta_val != 0:
                                delta_color_css = (
                                    f"color: {delta_color_pos};"
                                    if delta_val > 0
                                    else f"color: {delta_color_neg};"
                                )
                                delta_symbol = "↑" if delta_val > 0 else "↓"
                                # Formatting delta based on the value_format
                                if value_format == "currency":
                                    delta_val_formatted = f"${abs(delta_val):,.{num_decimals}f}"
                                elif value_format == "percentage":
                                    delta_val_formatted = f"{abs(delta_val):.{num_decimals}f}%"
                                else:
                                    delta_val_formatted = f"{abs(delta_val):,.{num_decimals}f}"
                                delta_html = f"<div style='text-align: center; font-size: {delta_font_size}; {delta_color_css}'>{delta_symbol} {delta_val_formatted}</div>"

                            container_style = f"background: linear-gradient(to bottom, {bg_light_color1}, {bg_dark_color1}); border-radius: {border_radius}; height: {height}px; padding: 1rem;"
                            if border:
                                container_style += " border: 1px solid #ddd;"

                            # Use st.html without the height argument and without unsafe_allow_html
                            st.html(
                                f"""
                                <div style='{container_style}'>
                                    <div style='text-align: center; margin-bottom: 0rem;'><{heading} style='color: {title_color}; font-size: {title_font_size};'>{title}</{heading}></div>
                                    <div style='text-align: center; font-size: {value_font_size}; color: {value_color};'>{value_formatted}</div>
                                    {delta_html}
                                </div>
                                """
                            )
                        coltesta, coltestb = st.columns([1, 3])
                        
                        with coltesta:
                            latest_year_gdp_us_alt = 2024
                            latest_value_gdp_us_alt = 65411
                            custom_scorecard(
                                title=f"GDP/Per Capita US ({latest_year_gdp_us_alt})",
                                value=latest_value_gdp_us_alt,
                                delta_val=-4000,
                                title_color="#ffffff",
                                value_color="#ffffff",
                                delta_color_pos="#9eed3d",
                                delta_color_neg="#dd8dd3",
                                bg_light_color1="#3374A3",
                                bg_dark_color1="#174C7E",
                                title_font_size="1.2rem",
                                value_font_size="2rem",
                                delta_font_size="1rem",
                                border_radius="20px",
                                num_decimals=2,
                                value_format="currency",
                            )

Thank you for your help!

1 Like