Numeric Entry Field - Align: Center

I have a numeric input with align: center. This works well, but in the designer i get an error that i can only put ['left', 'right'].

Is this just a bug or is there another way to do this without the warning/error?

It works because that's valid css, but you get that warning because that particular component is not expecting it. We don't usually center-align inputs, it's not a good UI/UX practice.

2 Likes

Ok, so just accept the little red thingy or make it left or right, Thanks!

I have a pseudo css script on the flexcontainer around it to have a little % at the bottom right, so center looked the best i thought haha.

image

Typically the unit would be to the right and the same font face and size as the input. The input would be right aligned in this case. As you have it, should the number get large enough, in text length then it would overlap you unit symbol.

1 Like

I'm afraid that this indicates that it wasn't created by a professional designer - even if you are getting paid! Have a look at any commercial applications. You won't see that layout because anything inside the numeric entry field should be editable. If it's not editable then it doesn't belong inside.
Numeric values should be right-aligned.

1 Like

You are right indeed! I'm just an Intern learning how to use Ignition perspective and far from a UI designer, but i will take your feedback and make changes.
I'm just a software engineer, normally working with C and C++

Thank you

And the assumption that it is not editable is not right btw :slight_smile:

I disagree actually, I put my units inside of the numeric input component as well, but I do right align it. I put it inside so that putting them beside non input components also with units doesn't look unprofessional due to their different look. I agree it shouldn't be centred though

2 Likes