Hello. Is there any way to make the text box on template ui into fixed size no matter how much I put it? The current text box is getting smaller as soon as the ui template reach the end. I want it to be the same as radio button, as the size still the same even thought I put as many so many of it.
This is my node:
[
{
"id": "b0058f5e4296c905",
"type": "ui_text_input",
"z": "58de72f1d81d5e3d",
"name": "",
"label": "",
"tooltip": "",
"group": "165e1e1a.e752fa",
"order": 1,
"width": 14,
"height": 1,
"passthru": true,
"mode": "number",
"delay": "0",
"topic": "topic",
"sendOnBlur": true,
"className": "",
"topicType": "msg",
"x": 470,
"y": 540,
"wires": [
[
"a13a98cdbcd202a7"
]
]
},
{
"id": "a13a98cdbcd202a7",
"type": "function",
"z": "58de72f1d81d5e3d",
"name": "function 25",
"func": "let amount = {};\nlet arr = [];\nlet loop = msg.payload;\nlet i = 0;\nwhile (i < loop) {\n let text = \"text\";\n text += (i+1);\n arr.push(text);\n i+=1;\n}\n\nmsg.payload = arr;\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 650,
"y": 540,
"wires": [
[
"0030a49599b64614"
]
]
},
{
"id": "0030a49599b64614",
"type": "change",
"z": "58de72f1d81d5e3d",
"name": "",
"rules": [
{
"t": "set",
"p": "topic",
"pt": "msg",
"to": "chart1",
"tot": "str"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 810,
"y": 540,
"wires": [
[
"d96645084a584017"
]
]
},
{
"id": "d96645084a584017",
"type": "function",
"z": "58de72f1d81d5e3d",
"name": "function 23",
"func": "\nvar radio = \"\";\nvar html = \"\";\nfor (var i in msg.payload){\n html += '<h1>Kategori '+ (parseInt(i)+1) + '</h1><label for=\"w' + i + '\">Kolom ' + (parseInt(i)+1) + '</label><textarea id=\"w' + i + '\" name=\"w' + i + '\" rows=\"1\" cols=\"80\">' + msg.payload[i] + '</textarea>' +\n '<p> Choose your favroite season: </p> <label><input type=\"radio\" name=\"JTP'+i+'\"' + ' id=\"summer\" value=\"summer\">Summer</label> <label><input type=\"radio\" name=\"JTP'+i+'\"' + ' id=\"winter\" value=\"winter\">Winter</label>';\n radio += 'input[name=\"JTP'+ i + `\"`+ ']:checked, #w' + i + \", \"\n}\nradio = radio.slice(0, -2);\n\nvar sendButton = `<script> \nthis.scope.action = function() {\n \n var value = document.querySelectorAll(`+'\\'' + radio +'\\'' +`); \n value = Object.values(value).map(element => element.value)\n return value; } \n</script> \n<md-button ng-click=\"send({ payload: action() })\"> Click here to send the data </md-button>`\n\n\n\nmsg.template = html + sendButton ;\n\nreturn msg;\n\n",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 590,
"y": 280,
"wires": [
[
"2b69d2df.753636",
"a690cefb66d1bfc5"
]
]
},
{
"id": "2b69d2df.753636",
"type": "ui_template",
"z": "58de72f1d81d5e3d",
"group": "165e1e1a.e752fa",
"name": "",
"order": 2,
"width": 14,
"height": 6,
"format": "",
"storeOutMessages": false,
"fwdInMessages": false,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 920,
"y": 260,
"wires": [
[
"ea3caac460682f1b"
]
]
},
{
"id": "165e1e1a.e752fa",
"type": "ui_group",
"name": "Default",
"tab": "f9b58883.fa613",
"order": 1,
"disp": false,
"width": 14,
"collapse": false,
"className": ""
},
{
"id": "f9b58883.fa613",
"type": "ui_tab",
"name": "Home",
"icon": "dashboard",
"order": 1,
"disabled": false,
"hidden": false
}
]
How to use: You simply insert the number you need, and the program will generate content as much as you input.
The problem occurs after you put so many number as the textbox became unreadable ( but the radio button still at the same size ). I want the textbox stay at it's original size even thought I put so many of it. Thank you!
