# Numeric Entry Field labeled border

**URL:** <https://forum.inductiveautomation.com/t/numeric-entry-field-labeled-border/77009>\
**Category:** Ignition\
**Tags:** ignition81, perspective, vision\
**Created:** [July 27, 2023, 1:42pm UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-labeled-border/77009 "2023-07-27T13:42:45Z")\
**Posts on this page:** 1\
**Showing post:** 8

<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:** [July 30, 2023, 9:26am UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-labeled-border/77009/8 "2023-07-30T09:26:12Z")

</div>

> [@Ali\_Ali](#):
>
> I need the embedded view itself flex not coordinate.

You can get "flex" action if you set a coordinate view `props.mode : percent`.

![CoordNumericWithBorder](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/2/0257948cdec13c01c6fd48375d6773696df3bb17.gif)

To reproduce paste this view into your Project Browser.

> **coordNumericEntryWidget**
>
> ````auto
> {
> "custom": {},
> "params": {
> "caption": "Caption",
> "value": 3.1416
> },
> "propConfig": {
> "params.caption": {
> "paramDirection": "input",
> "persistent": true
> },
> "params.value": {
> "paramDirection": "inout",
> "persistent": true
> }
> },
> "props": {
> "defaultSize": {
> "height": 83,
> "width": 465
> }
> },
> "root": {
> "children": [
> {
> "meta": {
> "name": "lblBorder"
> },
> "position": {
> "width": 1
> },
> "propConfig": {
> "position.height": {
> "binding": {
> "config": {
> "expression": "({view.props.defaultSize.height} - {this.props.style.marginTop})\r\n/ {view.props.defaultSize.height}"
> },
> "type": "expr"
> }
> }
> },
> "props": {
> "style": {
> "borderBottomLeftRadius": 10,
> "borderBottomRightRadius": 10,
> "borderColor": "#888282",
> "borderStyle": "solid",
> "borderTopLeftRadius": 10,
> "borderTopRightRadius": 10,
> "borderWidth": 1,
> "marginTop": 10
> }
> },
> "type": "ia.display.label"
> },
> {
> "meta": {
> "name": "txtNumericEntry"
> },
> "position": {
> "height": 0.3556,
> "width": 1,
> "y": 0.4444
> },
> "propConfig": {
> "props.value": {
> "binding": {
> "config": {
> "bidirectional": true,
> "path": "view.params.value"
> },
> "type": "property"
> }
> }
> },
> "props": {
> "style": {
> "marginLeft": 15,
> "marginRight": 15
> }
> },
> "type": "ia.input.numeric-entry-field"
> },
> {
> "children": [
> {
> "meta": {
> "name": "lblCaption"
> },
> "position": {
> "shrink": 0
> },
> "propConfig": {
> "props.text": {
> "binding": {
> "config": {
> "path": "view.params.caption"
> },
> "type": "property"
> }
> }
> },
> "props": {
> "style": {
> "backgroundColor": "#f7f7f7",
> "paddingLeft": 5,
> "paddingRight": 5
> }
> },
> "type": "ia.display.label"
> }
> ],
> "meta": {
> "name": "FlexContainer"
> },
> "position": {
> "height": 1,
> "width": 1
> },
> "props": {
> "alignContent": "flex-start",
> "alignItems": "flex-start",
> "style": {
> "paddingLeft": 15
> }
> },
> "type": "ia.container.flex"
> }
> ],
> "meta": {
> "name": "root"
> },
> "props": {
> "mode": "percent"
> },
> "type": "ia.container.coord"
> }
> }```
> 
> ````

The main trick in this is to convert coordinates to percentages. I've done this using an integer number of pixels divided by the view width or height. e.g.  
`20 / {view.props.defaultSize.width}`

The caption is a view parameter. The value is also a parameter but set as bidirectional through the various views.

Have fun.

---

_[View the full topic](https://forum.inductiveautomation.com/t/numeric-entry-field-labeled-border/77009)._