Add padding to markdown with LaTeX formatting

[timL]

Summary

I’m simply looking to add some padding to a st.markdown object but also preserve the ability to use LaTeX formatting. So far, I haven’t been able to figure this out. Below is what I’ve tried. I’ve also tried using a <div> tag in place of <p> as well as <style>; in all cases the padding is applied but the LaTeX formatting is lost.

Steps to reproduce

st.markdown("<p style='padding-top:10px'> Height ($H$), inches </p>", unsafe_allow_html=True)

Does anyone know how to achieve this?

[mliu]

@timL

<p style='padding-top:10px'> Height ($H$), inches </p>

Maybe to split the padding style and text in two?

st.markdown("<p style='padding-top:10px'></p>", unsafe_allow_html=True)

st.markdown("Height $$(H)$$, inches", unsafe_allow_html=True)

[timL]

Thanks for the suggestion; unfortunately, that does not quite work. It seems to add much more than 10 pixels of spacing above the text in the second markdown object. Even if adjusting to 0px with the suggested approach, it still applies more than the intended offset.

For what it’s worth, I’m trying to vertically align the text in the markdown object with text shown in a number_input widget in an adjacent column. Without some sort of padding they are vertically offset from each other.

[mliu]

Can you provide an example in what the formatting should look like? It seems that i will need more padding in order to align from my understanding

col1, col2 = st.columns(2)

with col1:
    num1= st.number_input(label = 'Insert a number')
    num2 = st.number_input(label = 'Insert another number')
    
with col2:
    st.markdown("<p style='padding-top:20px'></p>", unsafe_allow_html=True)
    st.markdown("Height ($$H$$), inches", unsafe_allow_html=True)

    st.markdown("<p style='padding-top:30px'></p>", unsafe_allow_html=True)
    st.markdown("Width ($$W$$), inches", unsafe_allow_html=True)

[timL]

@mliu thanks for not giving up on me! I realized the challenge becomes more apparent when the labels are collapsed for the number_input widgets. I am trying to conserve vertical screen space as much as possible, hence adding markdown in an adjacent column to serve as the widget label instead of the standard way. Below shows the result of using 0 pixels of padding, as well as what happens when turning that off.

import streamlit as st

col1, col2 = st.columns(2)

with col1:
    num1= st.number_input(label = 'Insert a number', label_visibility='collapsed')
    num2 = st.number_input(label = 'Insert another number', label_visibility='collapsed')
    
with col2:
    st.markdown("<p style='padding-top:0px'></p>", unsafe_allow_html=True)
    st.markdown("Height ($$H$$), inches", unsafe_allow_html=True)

    st.markdown("<p style='padding-top:0px'></p>", unsafe_allow_html=True)
    st.markdown("Width ($$W$$), inches", unsafe_allow_html=True)

import streamlit as st

col1, col2 = st.columns(2)

with col1:
    num1= st.number_input(label = 'Insert a number', label_visibility='collapsed')
    num2 = st.number_input(label = 'Insert another number', label_visibility='collapsed')
    
with col2:
    # st.markdown("<p style='padding-top:0px'></p>", unsafe_allow_html=True)
    st.markdown("Height ($$H$$), inches", unsafe_allow_html=True)

    # st.markdown("<p style='padding-top:0px'></p>", unsafe_allow_html=True)
    st.markdown("Width ($$W$$), inches", unsafe_allow_html=True)

[mliu]

@timL I see. Looks like giving a 0px padding is the closest alignment we can do. Please feel free to log this as an improvement in github issues.