Perspective Numeric entry field problems

Ignition
,
1

Hi,

in my perspective apps i have 2 problems with Numeric entry field (version 8.1.28).

  1. If the spinner is enabled the "numeric entry field" changes its size when it receives focus. How can I prevent the resizing of the element's size?

Normal condition:
image

Focused condition:
image

  1. If i disable the spinner i'm unable to update a value more than once. I have to refresh the page to regain the ability to change the value. If I don't refresh the page, I can only make changes to the data again after performing a specific number of operations or manually losing and regaining focus multiple times.

EDIT on point 2: The issue does not occur when the spinner is enabled.

2

Is the problem that the spinner covers up the decimal number? If so, you can use the padding property to move the number over to allow room for the spinner.

3

Hi,

i tried using a padding of 50 but the issue persists.

image

4

You'll probably have to set style.overflow for the flex containers housing the numeric input components to visible

5

With your advice, the box still resizes, but the scroll bars do not appear. For problem 1, I think it could be an acceptable solution.

6

The result is terrible in some cases.. but it works.

image

7

What are your position settings of the numeric input?
Try increasing the height slightly as well of the row

8

The control isn't on a row. All controls are in a Flex Container.
Here you are the control's json.

{
        "type": "ia.input.numeric-entry-field",
        "version": 0,
        "props": {
          "format": "###0.0",
          "spinner": {
            "increment": 0.1
          },
          "style": {
            "marginBottom": 5,
            "marginLeft": 10,
            "marginRight": 10,
            "marginTop": 5,
            "paddingRight": 25
          }
        },
        "meta": {
          "name": "TR1_MavVel"
        },
        "position": {
          "shrink": 0,
          "basis": "40px"
        },
        "custom": {},
        "propConfig": {
          "props.value": {
            "binding": {
              "config": {
                "bidirectional": true,
                "fallbackDelay": 2.5,
                "mode": "indirect",
                "references": {
                  "1": "{view.params.sorting}"
                },
                "tagPath": "[IG_SIS1C_SRT]IG/SIS1C/SRT/SRT0{1}/TUH/WF/WF_2_"
              },
              "type": "tag"
            }
          }
        }
      },
9

Set the grow property in the position section to 0.

10

I added a bgcolor to containerStyle to show the real difference of size-position between unfocused-focused control.

no focus:
image

focus:
image

11

Hi, is already set to 0.

12

I'll give it a look later when I have more time.

1 Like
13

What are all of the paddings and margins used for? They seem a bit excessive. Will style.gap: 5px set on the flex container replace these?
And maybe style.margin: 10px as well, after removing margin and padding from the individual flex components

2 Likes
14

Wonderful!! after removing margin and padding from the individual flex components and using the "style.gap" on container the control doesn't change size and position when focused!

I that way i can keep enable the control's spin to avoid issue on data insert.

1 Like