Color picker - label right like checkbox

šŸŽˆ Using Streamlit
1

Hi there,

the label of the color picker is on top, the one for the checkbox is on the right. Is there a way to change the layout of the color picker, so itā€™s consistent with the checkbox?

Maybe thereā€™s some sort of html-thing I could do with st.write()? I really need the label on the right instead of on topā€¦

Thanks for your help.

2

ā€¦or maybe thereā€™s a way to get rid of the label completely? I probably could work with that tooā€¦

3

I found something similar here:

They use something like this code to change the layout of radio buttons:

st.write(ā€˜div.row-widget.stRadio > div{flex-direction:row;}ā€™, unsafe_allow_html=True)

Seems like that could be used for the color picker as well. I played around with it, but since I donā€™t really know how it works, I couldnā€™t make it work. This is one of the things I tried (unsuccessfully):

           st.write(
                "<style>"
                    "div.stColorPicker > "
                    "div{"
                        "display: flex; "
                        "flex-direction: row-reverse; "
                        "align-items: flex-start; "
                        "justify-content: flex-end; " 
                    "}"
                "</style>",
                unsafe_allow_html=True
            )

Any ideas?

4

It took me forever to find the right divs and settings, but I finally managed to make the color picker look like the check boxes. Hereā€™s the code I used if anyone needs it:

st.markdown(
    '''
    <style>
        div.css-1me30nu {           
            gap: 0.5rem;
        }
        div.css-96rroi {
            display: flex; 
            flex-direction: row-reverse; 
            align-items: center; 
            justify-content: flex-end; 
            line-height: 1.6; 
        }
        div.css-96rroi > label {
            margin-bottom: 0px;
            padding-left: 8px;
            font-size: 1rem; 
        } 
        div.css-96rroi > div {
             height: 20px;
             width: 20px;
             vertical-align: middle;
        } 
        div.css-96rroi > div > div {
            height: 20px;
            width: 20px;
            padding: 0px;
            vertical-align: middle;
        } 
    </style>   
    ''',
    unsafe_allow_html=True
)
1 Like
5

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