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.

Button alignment and responsive isnt work
#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
)