# Numeric Entry Field Moving On Click

**URL:** <https://forum.inductiveautomation.com/t/numeric-entry-field-moving-on-click/58843>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [April 26, 2022, 2:35am UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-moving-on-click/58843 "2022-04-26T02:35:36Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Casu](https://avatars.discourse-cdn.com/v4/letter/c/49beb7/32.png) [@Casu](https://forum.inductiveautomation.com/u/Casu)\
**Post date:** [April 26, 2022, 2:35am UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-moving-on-click/58843/1 "2022-04-26T02:35:36Z")

</div>

Hi, just wondering if this is fixable - below is my numeric text field, when I click into the box, it will move slightly downwards, so the dark gray background is visible. This darker box is where the textbox is placed originally.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/1/a16f836fecc30ff77dc4abe610f50aaf71c7cd30.png)

Not sure if this is just an intended feature as not all my numeric text fields behave the same, sometimes the box will move, other times, my text on the left will shift slightly upwards.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [April 26, 2022, 6:17am UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-moving-on-click/58843/2 "2022-04-26T06:17:36Z")

</div>

Could you provide a formated (press `</>`) json of your view?

---

<div class="post-metadata">

**Author:** ![Casu](https://avatars.discourse-cdn.com/v4/letter/c/49beb7/32.png) [@Casu](https://forum.inductiveautomation.com/u/Casu)\
**Post date:** [April 26, 2022, 7:49pm UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-moving-on-click/58843/3 "2022-04-26T19:49:54Z")

</div>

Hey victordcq, here’s the JSON for those text fields - in my above picture, I re-used this through an embedded view.

```auto
{
  "custom": {
    "HighLightFrame": false,
    "Language": "",
    "ValueInit": 1,
    "ValueInitFirstScan": false,
    "ValueOld": "",
    "_Version": "V6.6.00"
  },
  "params": {
    "Descr": "---",
    "Enable": true,
    "Path": "---",
    "Property": "Value"
  },
  "propConfig": {
    "custom.HighLightFrame": {
      "persistent": true
    },
    "custom.Language": {
      "persistent": true
    },
    "custom.ValueInit": {
      "persistent": true
    },
    "custom.ValueInitFirstScan": {
      "persistent": true
    },
    "custom.ValueOld": {
      "persistent": true
    },
    "custom._Version": {
      "persistent": true
    },
    "params.Descr": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.Enable": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.Path": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.Property": {
      "paramDirection": "input",
      "persistent": true
    }
  },
  "props": {
    "defaultSize": {
      "height": 20,
      "width": 190
    }
  },
  "root": {
    "children": [
      {
        "meta": {
          "name": "Rectangle1"
        },
        "position": {
          "height": 20,
          "width": 70,
          "x": 120
        },
        "propConfig": {
          "props.style.backgroundColor": {
            "binding": {
              "config": {
                "expression": "if ({view.custom.HighLightFrame},1,0)"
              },
              "transforms": [
                {
                  "fallback": "#FF0000",
                  "inputType": "scalar",
                  "mappings": [
                    {
                      "input": 1,
                      "output": "#6666CC"
                    },
                    {
                      "input": 0,
                      "output": "#A6A6A6"
                    }
                  ],
                  "outputType": "color",
                  "type": "map"
                }
              ],
              "type": "expr"
            }
          }
        },
        "type": "ia.container.coord"
      },
      {
        "meta": {
          "name": "txtDescription"
        },
        "position": {
          "height": 20,
          "width": 100
        },
        "propConfig": {
          "props.text": {
            "binding": {
              "config": {
                "expression": "if ({session.custom.DesignerMode},\r\n\t\"---\",\r\n\t{view.params.Descr})"
              },
              "type": "expr"
            }
          }
        },
        "props": {
          "textStyle": {
            "classes": "CommonElements/NormalText",
            "textAlign": "right"
          }
        },
        "type": "ia.display.label"
      },
      {
        "meta": {
          "name": "STD_EventLogging"
        },
        "position": {
          "height": 20,
          "width": 20,
          "x": 100
        },
        "props": {
          "path": "TPM/CommonElements/Functions/STD_EventLogging"
        },
        "type": "ia.display.view"
      },
      {
        "meta": {
          "name": "NumericEntryField"
        },
        "position": {
          "height": 20,
          "width": 70,
          "x": 120
        },
        "propConfig": {
          "props.enabled": {
            "binding": {
              "config": {
                "path": "session.props.auth.authenticated"
              },
              "type": "property"
            }
          },
          "props.value": {
            "binding": {
              "config": {
                "bidirectional": true,
                "fallbackDelay": 2.5,
                "mode": "indirect",
                "references": {
                  "Path": "{view.params.Path}",
                  "Property": "{view.params.Property}"
                },
                "tagPath": "{Path}/{Property}"
              },
              "type": "tag"
            }
          }
        },
        "props": {
          "placeholder": "\u0027null\u0027",
          "spinner": {
            "enabled": false
          },
          "style": {
            "backgroundColor": "#FFFFFF",
            "classes": "CommonElements/NormalText",
            "textAlign": "right"
          }
        },
        "type": "ia.input.numeric-entry-field"
      }
    ],
    "events": {
      "dom": {
        "onMouseUp": {
          "config": {
            "script": "\tif self.view.params.Value !\u003d self.view.custom.ValueOld and not ((self.view.custom.ValueInit \u003d\u003d True and self.view.custom.ValueInitFirstScan) or self.view.custom.ValueInit) and self.view.params.Enable:\n\t\tself.getSibling(\"STD_EventLogging\").props.params.EventType \u003d 3\n\t\t\n\t\tself.view.custom.ValueOld \u003d self.view.params.Value\n\t\tself.view.custom.ValueInitFirstScan \u003d False\n\n\twhile self.view.custom.ValueInit \u003d\u003d True:\n\t\tif QualityOf(self.view.params.Value) \u003d\u003d \"Good\":\n\t\t\t\t\tself.view.custom.ValueOld \u003d self.view.params.Value\n\t\t\t\t\tself.view.custom.ValueInit \u003d False\n\t\t\t\t\tself.view.custom.ValueInitFirstScan \u003d True\n\t\t\t\t\t"
          },
          "scope": "G",
          "type": "script"
        }
      },
      "system": {
        "onStartup": {
          "config": {
            "script": "\tself.view.custom.ValueInit \u003d 1\n\t"
          },
          "scope": "G",
          "type": "script"
        }
      }
    },
    "meta": {
      "name": "root"
    },
    "props": {
      "style": {
        "overflow": "visible"
      }
    },
    "type": "ia.container.coord"
  }
}

```

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [April 27, 2022, 6:43am UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-moving-on-click/58843/4 "2022-04-27T06:43:35Z")

</div>

How did you copy this? i cant seem to paste it in my designer. Eventho at first sight it looks in the correct format

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [April 27, 2022, 6:56am UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-moving-on-click/58843/5 "2022-04-27T06:56:21Z")

</div>

Anyways it seems like your input field is to small for the cursor size, causing the | to stretch out the inputfield a bit.  
It seems 23xp is just height enough, but Standard input fields in browsers are 32px. 20 is just really too small…  
But if you really really need the space you can add overflow:hidden to the containerStyle

---

<div class="post-metadata">

**Author:** ![Casu](https://avatars.discourse-cdn.com/v4/letter/c/49beb7/32.png) [@Casu](https://forum.inductiveautomation.com/u/Casu)\
**Post date:** [April 27, 2022, 7:30pm UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-moving-on-click/58843/6 "2022-04-27T19:30:01Z")

</div>

Thats boggling - I shift right clicked and copy JSON then pasted it here, not sure why it is acting funky.

---

<div class="post-metadata">

**Author:** ![Casu](https://avatars.discourse-cdn.com/v4/letter/c/49beb7/32.png) [@Casu](https://forum.inductiveautomation.com/u/Casu)\
**Post date:** [April 27, 2022, 7:31pm UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-moving-on-click/58843/7 "2022-04-27T19:31:36Z")

</div>

Ill try implementing a different font thank you - the overflow hidden I’ve already set to, so it acted fine itself, just when I put it as an embedded view it would shift slightly.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [April 28, 2022, 6:10am UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-moving-on-click/58843/8 "2022-04-28T06:10:57Z")

</div>

Weird, ahwell i just copied the childs of the root.

You really should consider making the input boxes bigger though, noone uses 20px, its just to small to use