Creating a nicely formatted search field?

Hello everybody,

Is there a way to create a nicely formatted search field in Streamlit and center it on the home page?

I am thinking of something as shown in the attached screen shot.

If this widget is not available yet, I think it would be a great addition for any data explorer app.

Any thoughts on this?

Thanks

Hello @mzeidhassan,

Here is the closest I could go :

  • I use unsafe_allow_html small hack to load custom CSS and change text color, background color and button radius. I think custom CSS is being internally discussed so we can expect some new things soon :slight_smile:
  • For horizontal layout of those widgets, there’s an issue for this, I’ll link your use case to it.
  • That magnifying glass in the Streamlit button…I have no idea yet how to inject material-icon or a png in the button legend, if you’re interested in that you may write an issue on Github :slight_smile:
  • When you say “search field”, do you want autocompletion too for your text_input ? The API could look like st.text_input(“Search”, autocomplete=function())…that could also be interesting

Anyway source code

style.css

body {
    color: #fff;
    background-color: #4F8BF9;
}

.stButton>button {
    color: #4F8BF9;
    border-radius: 50%;
    height: 3em;
    width: 3em;
}

.stTextInput>div>div>input {
    color: #4F8BF9;
}

app.py

import streamlit as st

def local_css(file_name):
    with open(file_name) as f:
        st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html=True)

def remote_css(url):
    st.markdown(f'<link href="{url}" rel="stylesheet">', unsafe_allow_html=True)    

def icon(icon_name):
    st.markdown(f'<i class="material-icons">{icon_name}</i>', unsafe_allow_html=True)

local_css("style.css")
remote_css('https://fonts.googleapis.com/icon?family=Material+Icons')

icon("search")
selected = st.text_input("", "Search...")
button_clicked = st.button("OK")

6 Likes

@andfanilo This is super-awesome indeed. Thanks a million for taking the time to write this. I really appreciate it. :+1:

autocomplete would be awesome for sure.

Thanks again!

Hi Fanilo!

thanks for sharing this.

I’ve uploaded the CSS in the root folder yet I can’t make this work locally (I’ve got a blank screen when I launch Streamlit)

Is there anything I need to add to the code above?

Thanks, Charly

What a cool solution, thanks!

But I’m trying to create 3 buttons (one to approve, one to reprove and to ignore) in an annotation tool.

I’d like to have a green button to the approve one, and a red button to the reprove one. Is it possible to change theirs colors?

Thanks, Diogo.

@Charly_Wargnier did you manage do make it work ? Still works on my side, make sure your app.py and styles.css are in the same folder.

Sooo…it’s getting tricky, you can go in the Inspector tab of your web browser, find the element you want to style, copy its CSS path it in the stylesheet and then edit the colors in the stylesheet :

import streamlit as st

def local_css(file_name):
    with open(file_name) as f:
        st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html=True)

local_css("style.css")

button_clicked = st.button("OK")
button_clicked = st.button("KO")
button_clicked = st.button("ignore")
body {
  color: #fff;
  background-color: #4f8bf9;
}

div.element-container:nth-child(2) button {
  color: blue;
  border-radius: 50%;
  height: 3em;
  width: 3em;
}

div.element-container:nth-child(3) button {
  color: red;
  border-radius: 50%;
  height: 3em;
  width: 3em;
}

div.element-container:nth-child(4) button {
  color: grey;
  border-radius: 50%;
  height: 3em;
  width: 3em;
}

image

this is not a very viable long term solution though…

we are currently experimenting with Custom Components which will enable you to create your own components into Streamlit, that means you should be able to style your own button (and maybe a search box with auto suggestion too) and change it’s color when desired from Python (if we correctly define the HTML/CSS part). I’ll keep this use case in mind and see if I can make you one when it’s out :wink:

3 Likes

Thanks andfanilo, I will give it a try!

Thanks a lot