Numeric Entry Text Position and style format

Ignition
1

Hello All,

A couple items on this.

  1. Why is there no center value in the enumuration for align for a numeric entry field?
  2. Why does the align not inherit from the style class assigned to the numeric entry field?
  3. Is there any way to remove the rounded corners on a numeric entry field? I want it to be squared to match the rest of my components. Border does not seem to change this.

Thanks,

Frank

2
  1. Set the Numeric Entry Field’s align property to center (it isn’t in the dropdown).
  2. Probably because of CSS specificity… Hard to tell without seeing your project.
  3. I don’t see that the default Numeric Entry input has a border radius, but if yours does, you can use borderRadius: 0; to make the edges a hard 90 degrees.
3

Yes, do this OR you could also supply props.style.textAlign with a property of "center !important".

Because we tried to hand-hold beginner users back in 8.0.0 and now that users are becoming more advanced and getting used to CSS they are finding that our old "improvements" are getting in their way. When we introduced props.align we did so in a way that happens to ignore css styles. We have an open issue to remove this property entirely and allow users to align the text through pure css in either an in-line property in style or an associated Named Style. This can not occur before 8.2.0 because it would be a "breaking" change to 8.1 users.

I'm in agreement with @YF129701 in that I see no corner rounding. Could you post a screenshot and include insight into any applied css styling (including named styles) applied to the component?

1 Like
4

I may be wrong, but using the !important rule is not recommended in most circumstances... It becomes difficult to troubleshoot style conflicts.

Scenario: You have multiple !important rules applying the same style but at different levels (parent, child, etc) and you're trying to find out why one of them is being used and not the others

5

That’s very true. I was just trying to provide an alternative to using the align property.

1 Like
6

I tried to use the textAlign on a numeric entry field and it did not center the numbers, where changing props.align to center does work.

7

Because it's just wrong!

Check any GUI applications developed by designers familiar with correct layout. Centre-aligned annouces, "Designed by amateur". Right-align them so that they line up when multiple numeric entry fields are in a column. A little padding on the right-hand side lets a little air into the box and improves legibility.

1 Like
8

Thanks for your opinion.

9

Darn these advanced designers fluent in CSS and picky about decimal alignment! :grin: