Creating a nicely formatted search field?

[mzeidhassan]

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

[andfanilo]

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

[mzeidhassan]

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

autocomplete would be awesome for sure.

Thanks again!

[Charly_Wargnier]

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

[dcpadilha]

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.

[andfanilo]

@Charly_Wargnier

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?

@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.

@dcpadilha

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?

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;
}

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

[Charly_Wargnier]

Thanks andfanilo, I will give it a try!

[Tshokelo_Mokubi]

Thanks a lot

[chefnewman]

Hi @andfanilo

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

Thanks,
Steve

[apex_yu]

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

[manhdoan291]

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

[smaranjitghose]

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

[oltipreka]

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. .
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.

[diahjunaidijr]

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