How to add ºC format in numeric entry field?

Hello community,
I want to ask that how to add ºC format in numeric entry field? I have shared the screenshot in which you will see that there are only few formatting options. I need to add ºC format. Hope to hear soon.

What you are proposing would be bad user interface design - although they do allow currency and % formats, but notice that if you set to percent mode that on clicking the field 17% changes to 0.17 which may cause some confusion for a user and in currency format the currency disappears when you click on the field to edit.

Degrees C
Good design would separate the numbers and units. These will behave consistently, the units remain displayed during edit and operation is clear to the user.

I’d say the formatting limitations are deliberate.

1 Like

The simplest solution would be to add it beside the field itself.

If you want it inside, then… I don’t know if there’s a built-in way to do it, but there’s always css.
I thought ::after might be able to do the trick, but I can’t get it to work.
So at this point my best best would be to put the unit text in a label right beside the input, and use css to push it on the left, while adding some padding to the input to make room for the unit.

image

Here I have an numeric field with paddingRight set to 30px, and a label with the unit text right next to it.
This label has a class I called add_unit and which looks like this:


here’s the css bit: } .psc-add_unit {position: relative; left: -25px} {
This sets the labels position to relative and moves it 25px to the left, so that it’s in the input.

Both of those are in a row flex container, so that they stay together.

1 Like

Excellent approach!
I try this one.

I hope you're referring to mine! :slight_smile:

1 Like

Yes I referred yours :slight_smile:Thanks