Aligning st.components.v1.iframe

Using Streamlit
1

Hi! How to align a st.components.v1.iframe? I tried using st.columns but it didn’t work. Is there another way? I’m new streamlit user.

2

Try this code.

import streamlit as st
import streamlit.components.v1 as components


st.set_page_config(layout='wide')

st.markdown('<center><h2>Sample iframes</h2></center>', unsafe_allow_html=True)

cols = st.columns([1, 1])

# left
link1 = "https://docs.streamlit.io/en/latest"
with cols[0]:
    components.iframe(link1, height=400, width=500)

# right
link2 = "https://en.wikipedia.org/wiki/2022_FIFA_World_Cup"
with cols[1]:
    components.iframe(link2, height=400, width=500)

Output

image
image1101×522 51.6 KB

Reference

3

I’m so sorry! I’m understanding but it would be to center the iframe on the page with no column on the left and right.

4

Try something like this.

import streamlit as st
import streamlit.components.v1 as components


st.set_page_config(layout='wide')

st.markdown('<center><h2>Sample iframes</h2></center>', unsafe_allow_html=True)

cols = st.columns([1, 1, 1, 1, 1, 1])

with cols[2]:
    link1 = "https://docs.streamlit.io/en/latest"
    components.iframe(link1, width=600, height=2000, scrolling=True)
5

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