How to center align the tab bar of Extra-Streamlit-Components?

Using Streamlit
1

Hi guys,

I’m making a navbar using Extra-Streamlit-Components :

N1uuIEe.png3030×426 23 KB

And I’m trying the center align the whole bar. I can do it using the inspect tool of Chrome :

SRVmzb6.png2970×1419 237 KB

But when doing the same thing in streamlit, it has no effect :

import streamlit as st
import extra_streamlit_components as stx

st.set_page_config(layout="wide")

st.markdown(
	"""
	<style>
	body {
		display: flex;
		justify-content: center;
	}
	</style>
	""",
	unsafe_allow_html=True,
)

stx.tab_bar(
    data=[
        stx.TabBarItemData(
            id="abc_xyz_123",
            title="Random Tab 1",
            description="This is the first random tab",
        ),
        stx.TabBarItemData(
            id="random_archive_456",
            title="Random Archive",
            description="Archive of random files",
        ),
        stx.TabBarItemData(
            id="query_example_789",
            title="Example Queries",
            description="Random example queries",
        ),
    ],
)

Can you tell me please what I’m doing wrong ?

2

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