Html files with internal document/reference links don't work in streamlit

Using Streamlit
1

Dear Streamlit Community,

I am building an app where I want to show a documentation page, when a button is clicked.
I embed this documentation page using the function streamlit.components.v1.html.
The embedded document is an html file created with word that contains internal links/references between different chapters.
However, when such a link is clicked, the layout of streamlit messes up:

image
image1536×503 16.4 KB

I provide a dummy code and a dummy code here:

import streamlit as st
import sys
from streamlit.web import cli as stcli


#Note
# pip uninstall altair
# pip install altair=4.0.0
# is needed (newer versions of altair seem not to work)


def main():

    # Reset input widgets upon button click
    def on_click_button_userguide():
        #The loaded file must be an html with all images embedded (i.e. not in a separate folder!)
        with open("test.html", 'r', encoding="utf-8") as f:
            DokuHtml = f.read()
        alignment_style = """
                    <style>
                        .main {
                            align-items: flex-start;
                            }
                    </style>
                    """
        st.markdown(alignment_style, unsafe_allow_html=True)
        st.components.v1.html(DokuHtml, width=1500, height=50000)


    st.sidebar.button("FAQ / User Guide", on_click=on_click_button_userguide)


if __name__ == '__main__':
    #Run streamlit app
    if st._is_running_with_streamlit:
        main()
    else:
        sys.argv = ["streamlit", "run", sys.argv[0]]
        sys.exit(stcli.main())

You can use any dummy html test.html file in utf-8 formatting that contains internal links.
I would very much appreciate your help to get that fixed.
I would like to display the FAQ section with working internal (and external) links.
Thanks already in advance!

2

Hi @Patrick

There’s a simple solution that may potentially solve the problem that you’re facing. Instead of the custom link function, you can use the Switch Page function from streamlit-extras for a multi-page app.

An example code snippet would look like the following:

from streamlit_extras.switch_page_button import switch_page

want_to_contribute = st.button("I want to contribute!")
if want_to_contribute:
    switch_page("Contribute")

Hope this helps!

3

Many thanks @dataprofessor:

Unfortunately creating a multipage app does not help.
I used the switch functionality as you suggested, but then i have to load the html on the second streamlit page. And there the same problem occurs again:

image
image803×515 14.4 KB

Any other ideas? It should be possible to just load an external html with internal links and display it in streamlit.
If not, can i somehow make a link that just open a new browser page (non-streamlit), where the documentation is visible?

4

I would not recommend using streamlit for hosting statically generated html files – you might as well host those elsewhere (e.g. on github pages). You could use the new st.link_button to add a button to your app that would send the user to a new external url.

5

I have the same issue, are you solve it?

6

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.