# Dashboard 2 single page? continue

**URL:** <https://discourse.nodered.org/t/dashboard-2-single-page-continue/100696>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [31 March 2026 17:56 UTC](https://discourse.nodered.org/t/dashboard-2-single-page-continue/100696 "2026-03-31T17:56:19Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Aaqu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/aaqu/32/101407_2.png) [@Aaqu](https://discourse.nodered.org/u/Aaqu)\
**Post date:** [31 March 2026 17:56 UTC](https://discourse.nodered.org/t/dashboard-2-single-page-continue/100696/1 "2026-03-31T17:56:19Z")

</div>

continue a [Dashboard 2 single page?](https://discourse.nodered.org/t/dashboard-2-single-page/100388)

@jbudd, @kuema and @TotallyInformation my trick to hide navbar\* and automatically adjusted width and height with custom paddings and margin in template

It may be easier to do, but it works.  
\*navbar seems to have a bug because it tends to appear when window is expanded, even when it's disabled.

may require some scrolling corrections

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/9/f9c3b263e107fdf097765d1baacd04126879bbd7.jpeg)

```flows
[
    {
        "id": "8edb7db434c0f47b",
        "type": "ui-template",
        "z": "03a3733837e5ab22",
        "group": "cd0dac1475062196",
        "page": "",
        "ui": "",
        "name": "v1 template full window",
        "order": 4,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<template>\n <div class=\"demo\">\n <h3 class=\"demo-title\">Demo — scrollable table</h3>\n <p class=\"demo-info\">Table scrolls independently while page stays fixed.</p>\n\n <div class=\"demo-table-wrap\">\n <div class=\"demo-table-scroll\">\n <table class=\"demo-table\">\n <thead>\n <tr>\n <th>#</th>\n <th>Name</th>\n <th>Value</th>\n <th>Status</th>\n </tr>\n </thead>\n <tbody>\n <tr v-for=\"n in 50\" :key=\"n\">\n <td>{{ n }}</td>\n <td>Item {{ n }}</td>\n <td>{{ (Math.random() * 100).toFixed(1) }}</td>\n <td>{{ n % 3 === 0 ? 'error' : n % 2 === 0 ? 'warn' : 'ok' }}</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n</template>\n\n<!-- ====== GLOBAL: Vuetify layout overrides ====== -->\n<style>\nhtml, body, #app,\n.v-application,\n.v-application __wrap,\n.nrdb-app,\n.v-main {\n height: 100% !important;\n margin: 0 !important;\n padding: 0 !important;\n overflow: hidden !important;\n}\n.v-navigation-drawer {\n display: none !important;\n}\n.v-main {\n --v-layout-left: 0px !important;\n --v-layout-right: 0px !important;\n --v-layout-top: 0px !important;\n --v-layout-bottom: 0px !important;\n}\n.nrdb-ui-page,\n.nrdb-ui-group,\n.v-card,\n.v-card-text,\n.nrdb-layout-group--grid,\n.nrdb-ui-widget {\n height: 100% !important;\n min-height: 0 !important;\n padding: 0 !important;\n margin: 0 !important;\n overflow: hidden !important;\n position: relative !important;\n}\n.v-card {\n border: none !important;\n box-shadow: none !important;\n}\n.v-card__ loader,\n.v-card__underlay,\n.nrdb-layout-overlay {\n display: none !important;\n}\n.nrdb-ui-page {\n grid-template-rows: 1fr !important;\n}\n.nrdb-ui-page ~ div,\n.nrdb-ui-page ~ .nrdb-layout-overlay {\n display: none !important;\n}\n</style>\n\n<!-- ====== layout ====== -->\n<style>\n.demo {\n display: flex;\n flex-direction: column;\n height: 100%;\n padding: 16px;\n box-sizing: border-box;\n gap: 12px;\n overflow: hidden;\n}\n.demo-title {\n margin: 0;\n flex-shrink: 0;\n}\n.demo-info {\n margin: 0;\n flex-shrink: 0;\n}\n.demo-table-wrap {\n flex: 1;\n min-height: 0;\n overflow: hidden;\n border-radius: 10px;\n}\n.demo-table-scroll {\n height: 100%;\n overflow-y: auto;\n}\n.demo-table {\n width: 100%;\n border-spacing: 0;\n}\n.demo-table th,\n.demo-table td {\n padding: 8px 12px;\n text-align: left;\n}\n.demo-table thead th {\n position: sticky;\n top: 0;\n z-index: 1;\n}\n</style>\n\n<!-- ====== theme ====== -->\n<style>\n.demo {\n font-family: Inter, sans-serif;\n background: #f5f5f7;\n border-radius: 12px;\n}\n.demo-title {\n font-size: 18px;\n font-weight: 700;\n color: #1a1a1a;\n letter-spacing: -0.02em;\n}\n.demo-info {\n font-size: 13px;\n color: #666;\n}\n.demo-table-wrap {\n background: #fff;\n border: 1px solid #d8d8d8;\n}\n.demo-table thead th {\n font-size: 12px;\n font-weight: 600;\n color: #888;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n background: #fff;\n border-bottom: 1px solid #d8d8d8;\n}\n.demo-table td {\n font-size: 13px;\n color: #1a1a1a;\n border-bottom: 1px solid #eee;\n}\n.demo-table tbody tr:hover {\n background: #f8f8fa;\n}\n</style>",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 150,
        "y": 60,
        "wires": [
            []
        ]
    },
    {
        "id": "cd0dac1475062196",
        "type": "ui-group",
        "name": "Group 1",
        "page": "e188ea992f7b5998",
        "width": "12",
        "height": 1,
        "order": 1,
        "showTitle": false,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "e188ea992f7b5998",
        "type": "ui-page",
        "name": "Page 1",
        "ui": "98d9c169110a1e36",
        "path": "/page1",
        "icon": "home",
        "layout": "grid",
        "theme": "4fb2df74dface31f",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            }
        ],
        "order": 2,
        "className": "",
        "visible": true,
        "disabled": false
    },
    {
        "id": "98d9c169110a1e36",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": true,
        "headerContent": "none",
        "navigationStyle": "none",
        "titleBarStyle": "hidden",
        "showReconnectNotification": true,
        "notificationDisplayTime": 1,
        "showDisconnectNotification": true,
        "allowInstall": false
    },
    {
        "id": "4fb2df74dface31f",
        "type": "ui-theme",
        "name": "empty",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "density": "compact",
            "pagePadding": "0px",
            "groupGap": "0px",
            "groupBorderRadius": "0px",
            "widgetGap": "0px"
        }
    },
    {
        "id": "ae64a15bc0341aa0",
        "type": "global-config",
        "env": [],
        "modules": {
            "@flowfuse/node-red-dashboard": "1.30.2"
        }
    }
]

```

---

<div class="post-metadata">

**Author:** ![Aaqu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/aaqu/32/101407_2.png) [@Aaqu](https://discourse.nodered.org/u/Aaqu)\
**Post date:** [1 April 2026 06:15 UTC](https://discourse.nodered.org/t/dashboard-2-single-page-continue/100696/2 "2026-04-01T06:15:22Z")

</div>

new version v2 only css

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/5/f5eee5145278ac8bceb58e5ab304a824077c0517.png)

```flows
[
    {
        "id": "a6fce8891e67672a",
        "type": "ui-template",
        "z": "be68b547c65aba23",
        "group": "cd0dac1475062196",
        "page": "",
        "ui": "",
        "name": "v2 template full window",
        "order": 4,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<template>\n <div class=\"demo\">\n <h3 class=\"demo-title\">Demo — scrollable table</h3>\n <p class=\"demo-info\">Table scrolls independently while page stays fixed.</p>\n\n <div class=\"demo-table-wrap\">\n <div class=\"demo-table-scroll\">\n <table class=\"demo-table\">\n <thead>\n <tr>\n <th>#</th>\n <th>Name</th>\n <th>Value</th>\n <th>Status</th>\n </tr>\n </thead>\n <tbody>\n <tr v-for=\"n in 50\" :key=\"n\">\n <td>{{ n }}</td>\n <td>Item {{ n }}</td>\n <td>{{ (Math.random() * 100).toFixed(1) }}</td>\n <td>{{ n % 3 === 0 ? 'error' : n % 2 === 0 ? 'warn' : 'ok' }}</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n</template>\n\n<!-- ====== GLOBAL: Vuetify layout overrides ====== -->\n<style>\nhtml, body, #app,\n.v-application,\n.v-application __wrap,\n.nrdb-app,\n.v-main {\n height: 100% !important;\n margin: 0 !important;\n padding: 0 !important;\n overflow: hidden !important;\n}\n.v-navigation-drawer {\n display: none !important;\n}\n.v-main {\n --v-layout-left: 0px !important;\n --v-layout-right: 0px !important;\n --v-layout-top: 0px !important;\n --v-layout-bottom: 0px !important;\n}\n.nrdb-ui-page,\n.nrdb-ui-group,\n.v-card,\n.v-card-text,\n.nrdb-layout-group--grid,\n.nrdb-ui-widget {\n height: 100% !important;\n min-height: 0 !important;\n padding: 0 !important;\n margin: 0 !important;\n overflow: hidden !important;\n position: relative !important;\n}\n.v-card {\n border: none !important;\n box-shadow: none !important;\n}\n.v-card__ loader,\n.v-card__underlay,\n.nrdb-layout-overlay {\n display: none !important;\n}\n.nrdb-ui-page {\n grid-template-rows: 1fr !important;\n}\n.nrdb-ui-page ~ div,\n.nrdb-ui-page ~ .nrdb-layout-overlay {\n display: none !important;\n}\n</style>\n\n<!-- ====== layout ====== -->\n<style>\n.demo {\n display: flex;\n flex-direction: column;\n height: 100%;\n padding: 16px;\n box-sizing: border-box;\n gap: 12px;\n overflow: hidden;\n}\n.demo-title {\n margin: 0;\n flex-shrink: 0;\n}\n.demo-info {\n margin: 0;\n flex-shrink: 0;\n}\n.demo-table-wrap {\n flex: 1;\n min-height: 0;\n overflow: hidden;\n border-radius: 10px;\n}\n.demo-table-scroll {\n height: 100%;\n overflow-y: auto;\n}\n.demo-table {\n width: 100%;\n border-spacing: 0;\n}\n.demo-table th,\n.demo-table td {\n padding: 8px 12px;\n text-align: left;\n}\n.demo-table thead th {\n position: sticky;\n top: 0;\n z-index: 1;\n}\n</style>\n\n<!-- ====== theme ====== -->\n<style>\n.demo {\n font-family: Inter, sans-serif;\n background: #f5f5f7;\n border-radius: 12px;\n}\n.demo-title {\n font-size: 18px;\n font-weight: 700;\n color: #1a1a1a;\n letter-spacing: -0.02em;\n}\n.demo-info {\n font-size: 13px;\n color: #666;\n}\n.demo-table-wrap {\n background: #fff;\n border: 1px solid #d8d8d8;\n}\n.demo-table thead th {\n font-size: 12px;\n font-weight: 600;\n color: #888;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n background: #fff;\n border-bottom: 1px solid #d8d8d8;\n}\n.demo-table td {\n font-size: 13px;\n color: #1a1a1a;\n border-bottom: 1px solid #eee;\n}\n.demo-table tbody tr:hover {\n background: #f8f8fa;\n}\n</style>",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 120,
        "y": 100,
        "wires": [
            []
        ]
    },
    {
        "id": "cd0dac1475062196",
        "type": "ui-group",
        "name": "Group 1",
        "page": "e188ea992f7b5998",
        "width": "12",
        "height": 1,
        "order": 1,
        "showTitle": false,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "e188ea992f7b5998",
        "type": "ui-page",
        "name": "Page 1",
        "ui": "98d9c169110a1e36",
        "path": "/page1",
        "icon": "home",
        "layout": "grid",
        "theme": "4fb2df74dface31f",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            }
        ],
        "order": 2,
        "className": "",
        "visible": true,
        "disabled": false
    },
    {
        "id": "98d9c169110a1e36",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": true,
        "headerContent": "none",
        "navigationStyle": "none",
        "titleBarStyle": "hidden",
        "showReconnectNotification": true,
        "notificationDisplayTime": 1,
        "showDisconnectNotification": true,
        "allowInstall": false
    },
    {
        "id": "4fb2df74dface31f",
        "type": "ui-theme",
        "name": "empty",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "density": "compact",
            "pagePadding": "0px",
            "groupGap": "0px",
            "groupBorderRadius": "0px",
            "widgetGap": "0px"
        }
    },
    {
        "id": "5bbd48e3ad559896",
        "type": "global-config",
        "env": [],
        "modules": {
            "@flowfuse/node-red-dashboard": "1.30.2"
        }
    }
]

```

---

<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:** [15 April 2026 06:15 UTC](https://discourse.nodered.org/t/dashboard-2-single-page-continue/100696/3 "2026-04-15T06:15:33Z")

</div>

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