# Displaying Radio Buttons options in one single line

**URL:** <https://discourse.nodered.org/t/displaying-radio-buttons-options-in-one-single-line/62322>\
**Category:** Dashboard\
**Created:** [7 May 2022 04:37 UTC](https://discourse.nodered.org/t/displaying-radio-buttons-options-in-one-single-line/62322 "2022-05-07T04:37:35Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![kvramji](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kvramji/32/59005_2.png) [@kvramji](https://discourse.nodered.org/u/kvramji)\
**Post date:** [7 May 2022 04:37 UTC](https://discourse.nodered.org/t/displaying-radio-buttons-options-in-one-single-line/62322/1 "2022-05-07T04:37:36Z")

</div>

I found this [nice example](https://flows.nodered.org/flow/c87e0cfb760bf85befa079cff9f714f7) 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

```auto
[
    {
        "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
    }
]

```

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [7 May 2022 08:56 UTC](https://discourse.nodered.org/t/displaying-radio-buttons-options-in-one-single-line/62322/2 "2022-05-07T08:56:30Z")

</div>

Try something like this

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![kvramji](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kvramji/32/59005_2.png) [@kvramji](https://discourse.nodered.org/u/kvramji)\
**Post date:** [7 May 2022 13:52 UTC](https://discourse.nodered.org/t/displaying-radio-buttons-options-in-one-single-line/62322/3 "2022-05-07T13:52:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kvramji](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kvramji/32/59005_2.png) [@kvramji](https://discourse.nodered.org/u/kvramji)\
**Post date:** [9 May 2022 09:53 UTC](https://discourse.nodered.org/t/displaying-radio-buttons-options-in-one-single-line/62322/4 "2022-05-09T09:53:38Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [9 May 2022 12:48 UTC](https://discourse.nodered.org/t/displaying-radio-buttons-options-in-one-single-line/62322/5 "2022-05-09T12:48:07Z")

</div>

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

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![kvramji](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kvramji/32/59005_2.png) [@kvramji](https://discourse.nodered.org/u/kvramji)\
**Post date:** [9 May 2022 16:41 UTC](https://discourse.nodered.org/t/displaying-radio-buttons-options-in-one-single-line/62322/6 "2022-05-09T16:41:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [23 May 2022 16:41 UTC](https://discourse.nodered.org/t/displaying-radio-buttons-options-in-one-single-line/62322/7 "2022-05-23T16:41:59Z")

</div>

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