continue a Dashboard 2 single page?
@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
[
{
"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"
}
}
]
