St.button() in a custom layout?

🎈 Using Streamlit
2

Hi there @danielvarga,

Currently that’s not supported, but we are working on Customizable Layout for Streamlit.
In the meantime you can hack your way around a solution by using st.markdown .
Please see the code below:

import streamlit as st

html = """
  <style>
    /* Disable overlay (fullscreen mode) buttons */
    .overlayBtn {
      display: none;
    }

    /* Remove horizontal scroll */
    .element-container {
      width: auto !important;
    }

    .fullScreenFrame > div {
      width: auto !important;
    }

    /* 2nd thumbnail */
    .element-container:nth-child(4) {
      top: -266px;
      left: 350px;
    }

    /* 1st button */
    .element-container:nth-child(3) {
      left: 10px;
      top: -60px;
    }

    /* 2nd button */
    .element-container:nth-child(5) {
      left: 360px;
      top: -326px;
    }
  </style>
"""
st.markdown(html, unsafe_allow_html=True)

st.image("https://www.w3schools.com/howto/img_forest.jpg", width=300)
st.button("Show", key=1)

st.image("https://www.w3schools.com/howto/img_forest.jpg", width=300)
st.button("Show", key=2)

Please feel free to let us know if you need any additional help!
And thanks for using Streamlit! :rocket:

5 Likes