Perspective Numeric entry field problems

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.

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.

Hi,

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

image

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

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.

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

image

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

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"
            }
          }
        }
      },

Set the grow property in the position section to 0.

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

no focus:
image

focus:
image

Hi, is already set to 0.

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

1 Like

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

1 Like

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