Are you using HTML in Markdown? Tell us why!

rutvik · June 1, 2020, 3:49pm

Hello,
I am trying to put two different coloured box around two different text in the same line. I know that currently a dedicated feature is not available. But as is visible in the twitter link you have attached she has somehow managed to do this. So could anyone please tell me how see was able to do that. I went through her git code but couldn’t figure out how:").

This is what I tried:
HTML_l = “”“

Total: {}

”""

HTML_r = “”“

Total: {}

”""

st.write((HTML_l.format(‘text1’),HTML_r.format(‘text2’)),unsafe_allow_html=True)
But didn’t work out

rutvik · June 1, 2020, 3:55pm

It vanished even second time:")

its this:
HTML_t = div style=“ovrflow-x:auto;color:white;border: 1px solid #e6e9ef; border-radius: 0.25rem;
padding: 0.5rem; background-color:#377ed4 ;margin-bottom: 1rem; width: 200px; float:left”>Total: {} div
HTML_r= div style=“ovrflow-x:auto;color:white;border: 1px solid #e6e9ef; border-radius: 0.25rem;
padding: 0.5rem; background-color:#257cd7 ;margin-bottom: 1rem; width: 200px; float:right”>Total: {} div

resentless · June 16, 2020, 4:01am

I am using HTML to format html data that comes from a json api.

pchalasani · July 5, 2020, 5:40pm

I’d like to show the output of tk.keras.model_summary, which includes multiple spaces on each line to ensure the various elements align. st.write collapses contiguous whitespace chars to a single one, and this messes up the display. Example output is

Model: "single_layer_network"
Layer (type)                  Output Shape   Param #
__________________________________________________________________________________________
dense (Dense)                 (None, 1)      28
activation (Activation)       (None, 1)      0
__________________________________________________________________________________________
Total params: 28
Trainable params: 28
Non-trainable params: 0

If I surround each string with <pre>... </pre> and use the unsafe_allow_html=True option, this whitespace gets preserved, otherwise collapsing whitespaces creates an unreadable/misaligned output

pchalasani · July 6, 2020, 5:28pm

I just realized I can just use st.text for “verbatim” text output that preserves whitespace, so for the above use case I don’t need html

thiago · August 3, 2020, 7:22pm

Hey @rutvik! For this use-case I just released a little Streamlit Component called st-annotated-text: https://github.com/tvst/st-annotated-text

LMK what you think!

rutvik · August 4, 2020, 5:32am

Woah! This is some amazing helpful work! Thanks a lot @thiago:D

andfanilo · August 4, 2020, 6:54am

Added your component to the tracker, since I saw this need pop multiple times on the forum great component @thiago !

(I’m also tempted to try your jsbuilder lib to pass JS events from Python to React components )

andio · August 8, 2020, 12:19am

I was going to show my Latent Dirichlet Allocation model which is interactive… https://pyldavis.readthedocs.io/en/latest/readme.html#usage you can save the file as an html an keep all the interactivity … should I just use Dash?

kierancondon · August 22, 2020, 8:54pm

Hi,

I’m using it to display tables with custom formatting (header colors, date formats, hover, highlighting outliers, etc…). I’m building the html from pandas:

html_string = '''
<html>
  <head><title>HTML Pandas Dataframe with CSS</title></head>
  <link rel="stylesheet" type="text/css" href=""/>
  <body>
    {table}
  </body>
</html>.
'''

table_html = df.style.hide_index.set_table_styles(styles).format(format_vals).applymap(function).render().

st.write(html_string.format(table=table_html), unsafe_allow_html=True)

Ajinkya_Chavan · September 19, 2020, 10:21pm

Yes, I was using HTML along with CSS to Animate and Style the Title Heading of My Web App created using Streamlit!!

Title_html = """
    <style>
        .title h1{
          user-select: none;
          font-size: 43px;
          color: white;
          background: repeating-linear-gradient(-45deg, red 0%, yellow 7.14%, rgb(0,255,0) 14.28%, rgb(0,255,255) 21.4%, cyan 28.56%, blue 35.7%, magenta 42.84%, red 50%);
          background-size: 600vw 600vw;
          -webkit-text-fill-color: transparent;
          -webkit-background-clip: text;
          animation: slide 10s linear infinite forwards;
        }
        @keyframes slide {
          0%{
            background-position-x: 0%;
          }
          100%{
            background-position-x: 600vw;
          }
        }
    </style> 
    
    <div class="title">
        <h1>RGB Color Classifier</h1>
    </div>
    """
st.markdown(Title_html, unsafe_allow_html=True) #Title rendering

Here is a gif for my web app where we see the Rainbow Title Animation

https://i.imgur.com/MP3VYXz.gif(image larger than 4096KB)

Myntur · December 6, 2020, 8:49pm

I have an use case where I want to display a pdf file on the left hand side and an html file having a sample extraction from the pdf on the right hand side. Presently it’s coming one below the other and I am unable to get them side by side. Is this possible in streamlit with the new horizontal layout option as I had been reading about? Waiting for an answer.

chris_klose · December 7, 2020, 8:21am

Hey @Myntur, I recommand to read this blogpost:
New layout options for Streamlit

Simply do:

col1, col2 = st.beta_columns(2)

Then you can put the contents into the cols.

Something like:

col1.image(pdf)
col2.write(extraction)

theimposingdwarf · December 21, 2020, 10:42pm

I’ve found that injecting markdown links vs using html links exhibit completely different behaviors. Markdown links tend to open the links in a new tab while using html style web links seems to redirect the existing tab. Each behavior has its place. Intersite links and redirects are better served with the html functionality whereas links to outside websites and resources are better served with he markdown style functionality.

I’m not quite web savvy enough to understand the nuances of why the functionality differs between the two options.

Marc · February 17, 2021, 12:34pm

Hi @theimposingdwarf

The difference being the target attribute of the <a> html tag. Markdown probably specifies a new tab as default. While for html the default is to navigate in the existing tab.

See HTML a target Attribute

quantoid · March 15, 2021, 5:43am

I’m showing tables of bugs filtered based on various criteria, and just want the unique bug key to be a link to the bug tracking tool, which we can do by adding a URL prefix.

At the moment the workaround is:

st.markdown(
    df.to_html(
        ...,
        escape=False,
        formatters={'key': lambda k: f'<a href="https://.../{k}">{k}</a>'},
    ),
    unsafe_allow_html=True,
)

geoffrygeorge · March 19, 2021, 2:18pm

Hi Streamlit Team. I am a bit new to this community and to streamlit itself and found it very fascinating and interesting. I am currently working on my MSc project and I am supposed to create an application to model epidemics. The application does not require any user credentials and private data therefore there will no issues concerning tampering with user data. The application runs on pure theological models and will use publically available datasets thus respecting all ethics. In short, user data is not involved and will not be in the future.

I am using HTML and CSS to change the look of my application by changing the background colour and introducing Lottie animations on the welcome page.
I also have used HTML to implement the ‘Justify’ alignment to the text used in markdown with the view to give the explanations an even look.
and also used them to modify the text on the main page as part of the welcome screen

I shall attach some screenshots to visually deliver what I have stated above.

Streamlit is very useful and is visually very appealing. There is a lot to learn and the more you learn you can create a powerful application but at the same time attending to all the visual aspects.

andfanilo · March 19, 2021, 5:07pm

Welcome to the community @geoffrygeorge

This looks gorgeous looking forward to the animated GIF with Lottie

Fanilo

geoffrygeorge · March 19, 2021, 10:44pm

@andfanilo Thank you so much and you have been such a great help with all your important discussions in the community and I have been referring to them and have been using them for my application.

EDIT: In my initial comment, it was supposed to be ‘epidemiological models’ rather than theological. A typo there, sorry if anyone misunderstood it.

mihir · March 28, 2021, 12:33am

Hi, I am trying to create a custom Streamlit component for my organization’s users to upload their files located in their Google Drives to the Streamlit application. Unfortunately, the Streamlit Custom Component is rendered as an iframe, which means that I cannot use the Google Picker API within my custom component. I tried to work around this by using both st.write, and st.markdown, but both strip my HTML string of <script> tags. Why is this, and what workarounds exist? This is a source of frustration for our users who are required to download their files from Google Drive locally, and then upload them to our Streamlit applications, rather than having our application handle it.