# 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:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ali\_Ali](https://avatars.discourse-cdn.com/v4/letter/a/bbe5ce/32.png) [@Ali\_Ali](https://forum.inductiveautomation.com/u/Ali_Ali)\
**Post date:** [July 27, 2023, 1:42pm UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-labeled-border/77009/1 "2023-07-27T13:42:45Z")

</div>

Hello, I would like to know if there is anyway to make Numeric Entry Field (perspective component) border style labeled (have text or label in the border itself like Vision Numeric Text Field component with Line Border type). Either with css style or building customized component somehow, but I need the output to be on component (Not with label + numeric entry field ). I found many solutions with HTML and CSS together but I can't figure out how to implement that inside Ignition.

![xSLyo](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/0/b088e0e6fa984b435ffb16b9240ff35e5349da96.png)

---

<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:** [July 27, 2023, 1:59pm UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-labeled-border/77009/2 "2023-07-27T13:59:43Z")

</div>

> [@Ali\_Ali](#):
>
> Not with label + numeric entry field

you can make a view with just that and embed it.

you could also add in the text with some css if you really want too, but you would need a class for every different text you want to put on

---

<div class="post-metadata">

**Author:** ![Ali\_Ali](https://avatars.discourse-cdn.com/v4/letter/a/bbe5ce/32.png) [@Ali\_Ali](https://forum.inductiveautomation.com/u/Ali_Ali)\
**Post date:** [July 27, 2023, 2:41pm UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-labeled-border/77009/3 "2023-07-27T14:41:31Z")

</div>

I know I can make a view and embed it but I need to make it one object.  
I can't find any resource that explain how to achieve that with just CSS classes. If you have any ideas I would be appreciated.

---

<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:** [July 27, 2023, 3:02pm UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-labeled-border/77009/4 "2023-07-27T15:02:20Z")

</div>

you need to give your input a style:  
ex (labelA)

then in the stylesheet.css  
you'll need a style something like this:  
adjust the left and top for position...

```auto
.psc-labelA::before{
  content:"labelAText";
  position: relative;
  left:5px;
  top:-5px;
}

```

maybe add in a backgroundcolor for the border

---

<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 27, 2023, 5:08pm UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-labeled-border/77009/5 "2023-07-27T17:08:58Z")

</div>

> [@Ali\_Ali](#):
>
> ... but I need to make it one object.

Why?  
What would that do for you that an embedded view wouldn't?

---

<div class="post-metadata">

**Author:** ![Ali\_Ali](https://avatars.discourse-cdn.com/v4/letter/a/bbe5ce/32.png) [@Ali\_Ali](https://forum.inductiveautomation.com/u/Ali_Ali)\
**Post date:** [July 30, 2023, 7:01am UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-labeled-border/77009/6 "2023-07-30T07:01:20Z")

</div>

Thank you for your help @victordcq .. But I could not apply your solution.

 ![Screenshot 2023-07-30 095556](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/5/e56ec44a8c0d2ce21799b18615bf3e8d85572a3d.jpeg)  
 ![Screenshot 2023-07-30 095515](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/f/cf4dc528f29552cc1d0fe0c977d34339402580d6.jpeg)

Also, is there any way to make the "content:" text variable and change it from the view?

---

<div class="post-metadata">

**Author:** ![Ali\_Ali](https://avatars.discourse-cdn.com/v4/letter/a/bbe5ce/32.png) [@Ali\_Ali](https://forum.inductiveautomation.com/u/Ali_Ali)\
**Post date:** [July 30, 2023, 7:28am UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-labeled-border/77009/7 "2023-07-30T07:28:12Z")

</div>

thank you for your suggestion @Transistor but I already have an embedded view for the input but I need to embed it in a flex container so I need the embedded view itself flex not coordinate.

---

<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.

---

<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:** [July 31, 2023, 6:57am UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-labeled-border/77009/9 "2023-07-31T06:57:28Z")

</div>

what do you mean you cant apply it? It looks like the text is there? Just change the top and left untill it is positioned correct.

and no it cant be a variable

> [@victordcq](#):
>
> you could also add in the text with some css if you really want too, but you would need a class for every different text you want to put on

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [March 6, 2024, 9:59am UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-labeled-border/77009/10 "2024-03-06T09:59:54Z")

</div>

You can just keep the standard mode and use `100%` for the width.  
You can even make it more complex with something like `calc(100% - 5px)`. You can mix and match the units to fit the situation.