Text_input help/tooltip hard to see and use on mobile

Good evening :slight_smile: ,

When working on my account settings page I felt the need to add some help= clarification at certain text_input fields and wanted to test it out with a simple “hello”.
Though it came out visible as a “he” with the first L cut off and with a very hard to use horizontal scrollbar to see the rest of the text as in the image below.

The code snippet to replicate this behaviour:

st.title("Account settings :gear:")
with st.form(key='settings_form'):
    name = st.text_input("Name")
    company_name = st.text_input("Company name")
    email = st.text_input("E-mail address", "test")
    password = st.text_input("New password", type="password", help="Hello")
    confirm_password = st.text_input("Confirm password", type="password")
    submit_button = st.form_submit_button(label="Save changes")

Is there a way I can make this more visible to users? As a workaround I could put in expanders or regular text in between the text_inputs but it would make the form not as clean looking as I’d prefer :stuck_out_tongue:

It’s alittle bit of a hack, but you can make the tooltip div wider and then the text will display correctly. Just add the css style injection below.

#---make tooltip alittle wider----------
tooltip_style = """
<style>
div[data-baseweb="tooltip"] {
  width: 350px;
}
</style>
"""
st.markdown(tooltip_style,unsafe_allow_html=True)
#---------------------------------------

st.title("Account settings :gear:")
with st.form(key='settings_form'):
    name = st.text_input("Name")
    company_name = st.text_input("Company name")
    email = st.text_input("E-mail address", "test")
    password = st.text_input("New password", type="password", help="Hello from Probability!")
    confirm_password = st.text_input("Confirm password", type="password")
    submit_button = st.form_submit_button(label="Save changes")

For example, using the small addition to your code running in mobile view.

1 Like

That’s actually great stuff, thank you!

Also any idea if it’s possible to make text_input not editable/greyed out/read only for the user? As to show information that’s known in the db but prevent them from changing it.
It looks inconsistent to do that with a st.write or st.info for example.

I agree there should be a parameter flag to disable the input control, so it looks like normal.

If you want to cheat it and still feel like it’s “part” of Streamlit, try this one.

#---------attach a new function to fake a disabled text_input so we can call natively-----------------
def disabled_inputtext(label, value, type="text", key=""):
    disabled_input = f"""
    <label style="font-size: 0.8rem;">{label}</label>
    <div data-baseweb="input" class="st-ba st-b4 st-bb st-b7 st-bc st-bd st-be st-bf st-bg st-bh st-bi st-bj st-bk st-b2 st-bl 
    st-av st-ay st-aw st-ax st-ae st-af st-ag st-ah st-ai st-aj st-bm st-bn st-bo st-bp st-bq st-br st-bs">
    <div data-baseweb="base-input" class="st-b4 st-b7 st-bt st-b2 st-bl st-ae st-af st-ag st-ah st-ai st-aj st-bu st-bq">
    <input aria-invalid="false" aria-required="false" autocomplete="" inputmode="text" name="{key}" placeholder="" type="{type}" 
    class="st-ba st-bv st-bw st-bx st-by st-bz st-c0 st-c1 st-c2 st-c3 st-c4 st-b7 st-c5 st-c6 st-c7 st-c8 st-c9 st-ca st-cb st-ae 
    st-af st-ag st-ah st-ai st-aj st-bu st-cc st-cd st-ce" 
    value="{value}" disabled>
    </div></div>
    """
    st.markdown(disabled_input,unsafe_allow_html=True)

st.disabled_input = disabled_inputtext
#----------------------------------------------------------------------------------------------------------

myval = st.text_input('Some text input')

# call it like it was part of Streamlit all along!
no_value = st.disabled_input('My disabled text input','Disabled text_input content!')

With the result

2 Likes

You’re amazing Probability! :sunglasses:
I sometimes run into some missing things that are seemingly pretty basic(or just variations on an existing widget) but I wouldn’t know how to wrap it up in a component like the Streamlit team does at the moment.
The disabled input would be one of them haha

I think I might just open up a new discussion post and list out all kinds of ideas for people to vote on and add to so the dev team can see what people are waiting for the most.

Thanks for the snippet, I’ll be using it until we have something in the official framework :slight_smile: appreciate the time you took!

Hi @Probability, sorry to jump in.
I was trying to add an animation typewriter inside a text_input object in streamlit.
Somehow I figured it out (though it is not the optimal solution) how to do it, by inserting the specific animation class inside the div[data-baseweb=“base-input”] .

Here’s my question. The easiest way to add a new class inside the div[data-baseweb=“base-input”] ?

Thank you in advance :pray: !