Displaying Radio Buttons options in one single line

Dashboard
1

I found this nice example which shows how you can create a radio button layout on Node red dashboard.

But i would like to know how to customize it so that you can have all the options in one single line.
Here is my flow

[
    {
        "id": "edc9a4910322d22a",
        "type": "function",
        "z": "2487b22980f7aa41",
        "name": "",
        "func": "var arr =[\"By Location\", \"By State\", \"By Comm Link\"];\nmsg.payload = arr;\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 1240,
        "y": 880,
        "wires": [
            [
                "ba7351e7e0c488da"
            ]
        ]
    },
    {
        "id": "9786d5641eb6104e",
        "type": "inject",
        "z": "2487b22980f7aa41",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": true,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 1070,
        "y": 880,
        "wires": [
            [
                "edc9a4910322d22a"
            ]
        ]
    },
    {
        "id": "55de9b4cc6b78e38",
        "type": "debug",
        "z": "2487b22980f7aa41",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 1610,
        "y": 880,
        "wires": []
    },
    {
        "id": "ba7351e7e0c488da",
        "type": "ui_template",
        "z": "2487b22980f7aa41",
        "group": "fee791eccb9591fd",
        "name": "Radio Buttons",
        "order": 6,
        "width": 3,
        "height": 2,
        "format": "<div style=\"margin: 0 0 0 -30px;\">\n  <ul>\n    <li ng-repeat=\"option in msg.payload track by $index\" \n      style=\"list-style-type: none;\">\n        <label>\n            <input type=\"radio\" ng-click=\"send({payload:option})\" value=\"{{option}}\" name=\"data\" />{{option}}\n        </label>\n    </li>\n </ul>\n</div>",
        "storeOutMessages": false,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 1420,
        "y": 880,
        "wires": [
            [
                "55de9b4cc6b78e38"
            ]
        ]
    },
    {
        "id": "fee791eccb9591fd",
        "type": "ui_group",
        "name": "Remote Shops",
        "tab": "5dfc90d0ba2ae355",
        "order": 1,
        "disp": false,
        "width": 30,
        "collapse": false,
        "className": ""
    },
    {
        "id": "5dfc90d0ba2ae355",
        "type": "ui_tab",
        "name": "Home",
        "icon": "dashboard",
        "order": 0,
        "disabled": false,
        "hidden": false
    }
]
2

Try something like this

<style>
.controls span {
    display: inline-block;
    width: 30%;
    height: 20px;
    text-align: center;
}
</style>

<div class="controls">
    <span ng-repeat="option in msg.payload track by $index">
        <label class="radio">
            <input type="radio" ng-click="send({payload:option})" value="{{option}}" name="data" />{{option}}
        </label>
    </span>
</div>
2 Likes
3

Perfect !
Works exactly as i wanted it to.
Thanks a lot :slight_smile:

4

I have one more question. I would like to set the first option in the options i have as radio buttons as default. Could you tell me what snippet of code i am missing :slight_smile:

5

You could set up a ng-model and set a default or just use ng-if

<style>
.controls span {
    display: inline-block;
    width: 30%;
    height: 20px;
    text-align: center;
}
</style>

<div class="controls">
    <span ng-repeat="option in msg.payload track by $index">
        <label class="radio">
            <input type="radio" ng-if="$index==0"  checked ng-click="send({payload:option})"  value="{{option}}" name="data"/> {{$index===0 ? option : ""}}
            <input type="radio" ng-if="$index>=1" ng-click="send({payload:option})" value="{{option}}" name="data"/> {{$index>=1 ? option : ""}}
        </label>
    </span>
</div>
6

Awesome !
Thanks a lot.
Not very well versed with html/css. Thanks for the tips :slight_smile:

7

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.