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.
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
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.
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...
.psc-labelA::before{
content:"labelAText";
position: relative;
left:5px;
top:-5px;
}
maybe add in a backgroundcolor for the border
Why?
What would that do for you that an embedded view wouldn't?
Thank you for your help @victordcq .. But I could not apply your solution.
Also, is there any way to make the "content:" text variable and change it from the view?
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.
You can get "flex" action if you set a coordinate view props.mode : percent.
To reproduce paste this view into your Project Browser.
{
"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.
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
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.