fix plot in Folium in streamlit

I'm trying to add both a map and a colored background simultaneously with the correct formatting, but I find an unexpected behaviour and not nice looking format.

Here is the code:

import streamlit as st
from streamlit_folium import st_folium
import folium

# setup page
st.set_page_config(page_title="streamlit test", layout="centered")

image_url = "https://img.freepik.com/foto-gratis/fondo-gris-pintado_53876-94041.jpg"

# CSS image
st.markdown(f"""
    <style>
        .stApp {{
            background-image: url("{image_url}");
            background-size: cover;
            background-position: center;
            background-color: transparent;
            font-family: 'Pacifico', cursive;
            color: #ffb6c1;
        }}
    </style>
""", unsafe_allow_html=True)

# Show Map
st_folium(
    folium.Map(
        location=[-20, 130], 
        zoom_start=5, 
        control_scale=True), 
    width=600, 
    height=400)

As a result you can see the format is not correct due to blank space, so I want the map using all avaliable margin figure:

• First app run we can see the result with a long white background:

• when rerunning the app we can see the result with a smaller white background :

You can use use_container_width=True instead of setting the width. A lot of streamlit elements have that key word argument (e.g. st.pyplot).

st_folium(
    folium.Map(
        location=[-20, 130], 
        zoom_start=4, 
        control_scale=True), 
    use_container_width=True,
    height=400)

This will work as expected.

In wide mode:

In narrow mode:

Or you can set explicitly width to None (which is what is happening internally whenever you set use_container_width=True.

st_folium(
    folium.Map(
        location=[-20, 130], 
        zoom_start=4, 
        control_scale=True), 
    width=None,
    height=400)

(PS: By the way, the default width is 500...)