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

2 Likes

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")

23 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:

8 Likes

Thanks andfanilo, I will give it a try!

Thanks a lot

1 Like

Hi @andfanilo

Is there any possibility you could share the code for the autocomplete function?

Thanks,
Steve

hi thanks for sharing,
however i cant get it works , it thorw an error that
StreamlitAPIException : set_page_config() can only be called once per app, and must be called as the first Streamlit command in your script.

For more information refer to the docs.

Traceback:

I cannot find in css which part use this config
and in my app code

i have this

st.set_page_config(
    page_title=" Testpage",
    page_icon=":shark",  # EP: how did they find a symbol?
    layout="wide",
    initial_sidebar_state="expanded",
)

in my app.py app

help me @ andfanilo
So what about text-input? div.element-container: nth-child (2) text-input ???

Considering you are having an app.py file for your streamlit app code

import streamlit as st

def main():
    """
    Heart of the streamlit App
    """
    # Some Basic Configuration for StreamLit
    st.set_page_config(
        page_title="Your Awesome App Title",
        page_icon="path_of_your_favicon",
        layout="wide",
        initial_sidebar_state="auto",
    )
    pages = ["Home", "Page 1", "Page 2"]
    p_choice = st.sidebar_selectbox("Menu", pages)
    if p_choice == "Home":
        local_css("style_1.css") # Relative path of the css file
        st.title("Some Relevant Info")
         .
         .
         .
    else if p_choice == "Page 2":
         local_css("style_2.css")
         st.title("Title of Page 2")
          .
          .
          .
def local_css(file_name):
    with open(file_name) as f:
        st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)

if __name__ ==  "__main__":
     main()

Either store the style_1.css, style_2.css, etc css files in the same directory as the app.py or give the relative path if you prefer something like assets\css\style_1.css

Hi everybody,
I have managed to change the default parameters of text input.
Yet, I was wandering which is the class ā€˜responsibleā€™ for text input that would allow for a typewriter effect inside the text input element. :roll_eyes:.
Inspecting the code, I can notice

, which contains a number of classes.
Inside, there is the ā€œ< input >ā€ tag?

So the final question will be:

  • Which is the best, ā€œ< div>ā€ or ā€œ< input >ā€ to insert the typewriter effect.

  • How to add a new class for the animation, in addition to the various st-4 st-b7 and so on.


Sir, sorry for bothering youā€¦Why my file style.css not found though it already in the same folder where main.py exist