Modal button in a fixed position using Bootstrap 4 and st.markdown or components.html

🎈 Using Streamlit
1

Context: I’d like to add a fixed button on the bottom right corner of a streamlit app as such:

image

For that, I’m using st.markdown to inject html and css:

st.markdown("""

<style>
.Information {
  background-color : #31B0D5;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  border-color: #46b8da;
}

#mybutton {
  position: fixed;
  bottom: -4px;
  right: 10px;
}
</style>

<div id="mybutton">
<button class="Information">Info</button>
</div>


""",unsafe_allow_html=True)

However, I’d like to now be able to click the button and a modal pop up to show up, similar to modals in bootstrap 4 - Bootstrap 4 Modals

For what I understand, we can only use javascript with components.html and I believe this functionality would require javascript to know when the button is being pressed.

However, when I convert the code to components.html, the button is no longer fixed to the right bottom corner of the page.

components.html("""

<style>
.Information {
  background-color : #31B0D5;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  border-color: #46b8da;
}

#mybutton {
  position: fixed;
  bottom: -4px;
  right: 10px;
}
</style>

<div id="mybutton">
<button class="Information">Info</button>
</div>


""")

How could I make it so that when using components.html, the button captures the css styles? And is there any bootstrap 4 implementation being used in streamlit for reference?

Thanks!

2

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