App works fine on desktop but not on mobile

Hi all,

I have built a little app (https://share.streamlit.io/pipscity1973/fpl_streamlit/FPL/fpl_streamlit.py)) which works just fine on dekstop but behave differently on mobile.

The issues are mainly with the sidebar, the only browser which works kinda ok with it is the MI browser, all other browser Chrome, Safari have got different issues. Safari doesnt always show the X, Chrome has issues when i use multiselect etc…

Whats your tip to make a mobile app works well with sidebars? I am tempted to remove the sidebar all together at this point.

Code i have been using:

my page config:
st.set_page_config(page_title=‘FPLOptimizer’, page_icon=":shark:", layout=“wide”,initial_sidebar_state=“auto”,
menu_items={
‘Get Help’: None,
‘Report a bug’: None,
‘About’: None
})

Removed the margin for main page and side bar using the below:
st.markdown("""

.css-18e3th9 {
padding-top: 2rem;
padding-bottom: 10rem;
padding-left: 2rem;
padding-right: 2rem;
}
.css-hxt7ib {
padding-top: 1rem;
padding-right: 1rem;
padding-bottom: 3.5rem;
padding-left: 1rem;
}

“”", unsafe_allow_html=True)

I am also using the following for displaying my table:
with st.container():
fig = go.Figure(data=[go.Table(columnwidth = [100,200,100,100,100,100,100,100],columnorder=[1,2,3,4,5,6,7,8],
#header=dict(values=list(final_df.columns),
header=dict(values=[‘pos’,‘name’, ‘Role’,objective, ‘team’, ‘cost’, ‘owned by’, ‘minutes’],
fill_color=‘paleturquoise’,
align=‘centerleft’,
font_size=14,
height=50,
),
cells=dict(values=[final_df.position,final_df.name, final_df.Role,final_df.iloc[:,1], final_df.team, final_df.cost,
final_df.selected_by_percent, final_df.minutes ],
fill_color=[‘white’, ‘white’,‘white’,‘white’,‘white’,‘white’,‘white’,‘white’],
line_color=‘lightblue’,
font_size=13,
height=23
))
])

fig.update_layout(width=800, height=1000, margin=dict(l=5,r=5,b=5,t=5))

st.plotly_chart(fig,use_container_width=True)

Just starting with streamlit so hoping some expert over here can bring me back to the right path :slight_smile:

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