# Numeric Entry Text Position and style format

**URL:** <https://forum.inductiveautomation.com/t/numeric-entry-text-position-and-style-format/48911>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [July 16, 2021, 2:25pm UTC](https://forum.inductiveautomation.com/t/numeric-entry-text-position-and-style-format/48911 "2021-07-16T14:25:31Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![franklepkowski](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/franklepkowski/32/4808_2.png) [@franklepkowski](https://forum.inductiveautomation.com/u/franklepkowski)\
**Post date:** [July 16, 2021, 2:25pm UTC](https://forum.inductiveautomation.com/t/numeric-entry-text-position-and-style-format/48911/1 "2021-07-16T14:25:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [July 16, 2021, 3:01pm UTC](https://forum.inductiveautomation.com/t/numeric-entry-text-position-and-style-format/48911/2 "2021-07-16T15:01:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [July 16, 2021, 5:44pm UTC](https://forum.inductiveautomation.com/t/numeric-entry-text-position-and-style-format/48911/3 "2021-07-16T17:44:24Z")

</div>

> [@YF129701](#):
>
> Set the Numeric Entry Field’s `align` property to `center` (it isn’t in the dropdown).

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

> [@franklepkowski](#):
>
> Why does the align not inherit from the style class assigned to the numeric entry field?

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.

> [@franklepkowski](#):
>
> 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.

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?

---

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [July 16, 2021, 6:38pm UTC](https://forum.inductiveautomation.com/t/numeric-entry-text-position-and-style-format/48911/4 "2021-07-16T18:38:20Z")

</div>

> [@cmallonee](#):
>
> property of “center !important”.

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

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [July 16, 2021, 6:50pm UTC](https://forum.inductiveautomation.com/t/numeric-entry-text-position-and-style-format/48911/5 "2021-07-16T18:50:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mdemaris](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mdemaris/32/54639_2.png) [@mdemaris](https://forum.inductiveautomation.com/u/mdemaris)\
**Post date:** [December 26, 2024, 11:49pm UTC](https://forum.inductiveautomation.com/t/numeric-entry-text-position-and-style-format/48911/6 "2024-12-26T23:49:20Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [December 27, 2024, 12:04am UTC](https://forum.inductiveautomation.com/t/numeric-entry-text-position-and-style-format/48911/7 "2024-12-27T00:04:31Z")

</div>

> [@franklepkowski](#):
>
> Why is there no center value in the enumuration for align for a numeric entry field?

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.

---

<div class="post-metadata">

**Author:** ![franklepkowski](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/franklepkowski/32/4808_2.png) [@franklepkowski](https://forum.inductiveautomation.com/u/franklepkowski)\
**Post date:** [December 27, 2024, 12:47am UTC](https://forum.inductiveautomation.com/t/numeric-entry-text-position-and-style-format/48911/8 "2024-12-27T00:47:51Z")

</div>

Thanks for your opinion.

---

<div class="post-metadata">

**Author:** ![mdemaris](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mdemaris/32/54639_2.png) [@mdemaris](https://forum.inductiveautomation.com/u/mdemaris)\
**Post date:** [December 27, 2024, 2:09am UTC](https://forum.inductiveautomation.com/t/numeric-entry-text-position-and-style-format/48911/9 "2024-12-27T02:09:54Z")

</div>

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