St.button() in a custom layout?

Using Streamlit
1

Hello!

I’m presenting thumbnail results in a streamlit app, and I’d like to tidy up the layout a bit, because it wastes too much screen real estate. Unfortunately I have to put up a “Show more” button for each thumbnail. I have two related questions regarding this:

  1. Is there a way to put widgets inside custom html?
  2. If not, is there at least a way to put widgets in the same line as some other piece of content?

This is a mockup of how my app currently looks:

tom_fejer_grid3
tom_fejer_grid31164×1517 265 KB

This is a mockup of how I’d like it to look:

tom_fejer_grid2
tom_fejer_grid21958×1254 406 KB

I’d appreciate any help, including even crude hacks. :slight_smile:

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