Adding a visual format to an input field

In Excel there is an option to add visual information to an input that does not actually interact with the value being typed in. For instance, I can set the custom format of a field so that entering just a number, the field would display 36 months. As far as Excel is concerned, this field only contains the number 36. This is accomplished by setting the field’s custom format to: 0 "months"

Is there any way to accomplish this in Bubble with an input field?

Hi there, @chris.charette241… this response probably won’t be all that helpful, but just in case… I don’t know of a way to incorporate the visual information into the input field itself, so I just use a text element to display the visual information beside the input. That being said (and I’m guessing you know this), when you are displaying the saved values from the database, you can display the dynamic data in a text element and then literally type the word “months” after the dynamic data to show the dynamic data and the visual information all in one element.

Anyway, maybe someone will come along and tell us both how to do it as part of the input (although, I would be surprised if that’s possible), and if not, maybe what I have written will be useful to you or someone else who comes across this thread.

Best…
Mike

Thank you…I had hoped there was a built-in way I could hide an element when hovered allowing me to stack a text element on top of an input with your suggestion but hiding is not an option on the element’s conditionals.

I was able to achieve this, however slightly ugly, by using a bit of CSS. I placed a text element on top of, and formatted exactly like, the input element. When I hover over the text field, it becomes hidden and I can enter new data into the input field.

The example CSS I used comes from stackoverflow and uses the Classify plugin from Julien Allard:
CSS: On hover show and hide different div’s at the same time? - Stack Overflow

Here is the result:
ShareX-03_31_21_11_35_07

2 Likes