Here is a view my dashboard. I have all the widgets disabled to just show the page... I have a scroll bar that extends through the nav bar and down to the bottom of the page. I am not sure why it is on the page.
I am hoping I missed a config.
thanks
Thats a bit odd, and certsinlt not by design. Which browser and opereting system is this?
Joe I am running the browser on my win 11 pc running Chrome. The server is a RPi 4.
Processor : aarch64
Kernel Version : #1 SMP PREEMPT Debian 1:6.6.74-1+rpt1 (2025-01-27)
Kernel Release : 6.6.74+rpt-rpi-v8
3 Apr 07:06:45 - [info] Node-RED version: v4.0.8
3 Apr 07:06:45 - [info] Node.js version: v20.18.3
3 Apr 07:06:45 - [info] Linux 6.6.74+rpt-rpi-v8 arm64 LE
3 Apr 07:06:45 - [info] Loading palette nodes
3 Apr 07:06:48 - [info] Settings file : /home/w8be/.node-red/settings.js
3 Apr 07:06:48 - [info] Context store : 'default' [module=memory]
3 Apr 07:06:48 - [info] User directory : /home/w8be/.node-red
3 Apr 07:06:48 - [info] Projects directory: /home/w8be/.node-red/projects
3 Apr 07:06:48 - [info] Server now running at http://127.0.0.1:1880/
3 Apr 07:06:48 - [info] Active project : Station-V2
3 Apr 07:06:48 - [info] Flows file : /home/w8be.node-red/projects/Station-V2/flows.json
3 Apr 07:06:48 - [warn] Using unencrypted credentials
3 Apr 07:06:48 - [info] Starting flows
3 Apr 07:06:48 - [info] [ui-base:My Dashboard] Node-RED Dashboard 2.0 (v1.22.1) started at /dashboard
3 Apr 07:06:48 - [info] [ui-base:My Dashboard] Created socket.io server bound to Node-RED port at path /dashboard/socket.io
3 Apr 07:06:48 - [info] Started flows
I loaded a new project and then added one a ui template for test and it renders fine. It has to be something in my code. See Below
[{"id":"f67fdbe25672c76b","type":"ui-template","z":"8b4af5c9cd375639","group":"95e26f1abb509c3d","page":"","ui":"","name":"datetime","order":1,"width":0,"height":0,"head":"","format":"<template>\n <Teleport v-if=\"mounted\" to=\"#app-bar-actions\">\n <p>UTC {{ displayDateTime }}</p>\n </Teleport>\n\n</template>\n\n<script>\n export default {\n data() {\n return {\n mounted: false,\n currentTime: new Date(),\n timer: undefined,\n\n }\n\n },\n\n methods: {\n setDateTime: function() {\n this.currentTime = new Date()\n\n }\n\n },\n\n computed: {\n displayDateTime: function() {\n return `${this.currentTime.toLocaleString('en-US',{ timeZone: 'UTC', hourCycle: 'h23', hour: `2-digit`, minute: `2-digit`, second: `2-digit`})}` //, ${this.currentTime.toLocaleTimeString()}`\n\n }\n\n },\n \n mounted() {\n this.mounted = true,\n this.timer = setInterval(this.setDateTime, 1000)\n },\n\n unmounted() {\n clearInterval(this.timer)\n\n },\n\n }\n\n</script>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":520,"y":220,"wires":[[]]},{"id":"4b86b2d730fe3349","type":"ui-template","z":"8b4af5c9cd375639","group":"95e26f1abb509c3d","page":"","ui":"","name":"freqCard","order":2,"width":"4","height":"1","head":"","format":"<template>\n\n <div> \n \n <v-btn size=\"x-small\">\n <v-icon icon=\"mdi-lock-open\" class=\"text-green text-h6\"></v-icon>\n </v-btn>\n\n <v-btn size=\"x-small\">\n <v-icon icon=\"mdi-format-horizontal-align-center\" class=\"text-blue text-h6\"></v-icon>\n </v-btn>\n\n <v-btn size=\"x-small\">\n <v-icon icon=\"mdi-headphones\" class=\"text-cyan text-h6\"></v-icon>\n </v-btn>\n\n <v-btn size=\"x-small\">\n <v-icon icon=\"mdi-volume-off\" class=\"text-cyan text-h6\"></v-icon>\n </v-btn>\n\n <v-btn size=\"x-small\">\n <v-icon icon=\"mdi-speaker\" class=\"text-cyan text-h6\"></v-icon>\n </v-btn>\n\n <v-btn size=\"x-small\">\n <v-icon icon=\"mdi-dolby\" class=\"text-cyan text-h6\"></v-icon>\n </v-btn>\n\n <v-btn size=\"x-small\">\n <v-icon icon=\"mdi-reload\" class=\"text-red text-h6\"></v-icon>\n </v-btn>\n\n <v-btn size=\"x-small\">\n <v-icon icon=\"mdi-power-plug\" class=\"text-green text-h6\"></v-icon>\n </v-btn> \n\n <v-card \n :variant=\"variant\"\n :icon='radio'\n class=\"mx-auto\"\n color=\"surface-variant\"\n max-width=\"344\">\n <v-card-subtitle class=\"text-amber-accent-4 text-h4 font-weight-bold\" style=\"font-size: 1.0em;\"> \n 14.074.000\n </v-card-subtitle>\n </v-card>\n\n<div class=\"dropdown\">\n <button class=\"dropbtn\">Band <br> 20</button>\n <div class=\"dropdown-content\">\n <a href=\"billing\">160</a>\n <a href=\"billing\">80</a>\n <a href=\"settings\">60</a>\n <a href=\"billing\">40</a>\n <a href=\"billing\">30</a>\n <a href=\"settings\">20</a>\n <a href=\"settings\">17</a>\n <a href=\"settings\">12</a>\n <a href=\"settings\">10</a>\n <a href=\"settings\">6</a>\n <!-- <a href=\"logout\">Logout 3</a> -->\n </div>\n</div>\n\n<div class=\"dropdown\">\n <button class=\"dropbtn\">Mode <br> DIGU</button>\n <div class=\"dropdown-content\">\n <a href=\"billing\">AM</a>\n <a href=\"billing\">CW</a>\n <a href=\"settings\">DIGL</a>\n <a href=\"billing\">DIGU</a>\n <a href=\"billing\">FM</a>\n <a href=\"settings\">Gen</a>\n <a href=\"settings\">LSB</a>\n <a href=\"settings\">SAM</a>\n <a href=\"settings\">USB</a>\n <!-- <a href=\"logout\">Logout 3</a> -->\n </div>\n</div>\n<!-- </div> -->\n<div class=\"dropdown\">\n <button class=\"dropbtn\">RX Ant <br> RX_A</button>\n <div class=\"dropdown-content\">\n <a href=\"billing\">ANT1</a>\n <a href=\"billing\">ANT2</a>\n <a href=\"billing\">RX_A</a>\n <a href=\"billing\">XVTA</a>\n <!-- <a href=\"logout\">Logout 3</a> -->\n </div>\n</div>\n\n<div class=\"dropdown\">\n <button class=\"dropbtn\">TX Ant <br> ANT1</button>\n <div class=\"dropdown-content\">\n <a href=\"billing\">ANT1</a>\n <a href=\"billing\">ANT2</a>\n <a href=\"billing\">RX_A</a>\n <a href=\"billing\">XVTA</a>\n <!-- <a href=\"logout\">Logout 3</a> -->\n </div>\n</div>\n\n<div class=\"dropdown\">\n <button class=\"dropbtn\">TX Dax <br> On</button>\n <div class=\"dropdown-content\">\n <a href=\"billing\">On</a>\n <a href=\"billing\">Off</a>\n <!-- <a href=\"logout\">Logout 3</a> -->\n </div>\n</div>\n\n<div class=\"dropdown\">\n <button class=\"dropbtn\">RX Dax <br> 1 </button>\n <div class=\"dropdown-content\">\n <a href=\"billing\">1</a>\n <a href=\"billing\">2</a>\n <a href=\"billing\">3</a>\n <a href=\"billing\">4</a>\n <a href=\"billing\">Off</a>\n <!-- <a href=\"logout\">Logout 3</a> -->\n </div> \n</div>\n\n</template>\n\n<script>\nexport default {\n name: \"App\",\n components: {},\n};\n</script>\n\n<style>\n#app {\n font-family: Avenir, Helvetica, Arial, Serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-align: center;\n // color: #2c3e50;\n color: #212121;\n margin-top: 10px;\n}\n\n.dropbtn {\n background-color: rgb(33, 33, 33);\n color: white;\n padding: 5px;\n font-size: 14px;\n border: none;\n}\n\n.dropdown {\n position: relative;\n display: inline-block;\n color: #669A9A;\n}\n\n.dropdown-content {\n display: none;\n position: absolute;\n background-color: rgb(102,154,154);\n min-width: 0.2em;\n box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n z-index: 1;\n //font-size: 12px;\n}\n\n.dropdown-content a {\n color: black;\n padding: 3px 4px;\n text-decoration: none;\n display: block;\n}\n\n.dropdown-content a:hover {\n background-color: #afafaf;\n}\n\n.dropdown:hover .dropdown-content {\n display: block;\n}\n\n.dropdown:hover .dropbtn {\n background-color: #afafaf;\n}\n\n\n</style>\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":600,"y":260,"wires":[[]]},{"id":"810584a1e8e6d7a6","type":"ui-template","z":"8b4af5c9cd375639","group":"95e26f1abb509c3d","page":"","ui":"","name":"env","order":4,"width":"4","height":"1","head":"","format":"<template>\n <div>\n\n <div class=\"dropdown\">\n <button class=\"dropbtn\">Pa ⚡<br> 14.2</button>\n </div>\n\n <div class=\"dropdown\">\n <button class=\"dropbtn\">Pa 🌡 <br> 95</button>\n <div class=\"dropdown-content\">\n <a href=\"billing\">Low</a>\n <a href=\"billing\">LowMid</a>\n <a href=\"settings\">Mid</a>\n <a href=\"billing\">MidHigh</a>\n <a href=\"billing\">High</a>\n </div>\n </div>\n\n <div class=\"dropdown\">\n <button class=\"dropbtn\">SWR<br>1.6</button>\n </div>\n\n <div class=\"dropdown\">\n <button class=\"dropbtn\">Tune<br>15</button>\n <div class=\"dropdown-content\">\n <a href=\"billing\">5</a>\n <a href=\"billing\">10</a>\n <a href=\"billing\">15</a>\n <a href=\"billing\">20</a>\n <!-- <a href=\"logout\">Logout 3</a> -->\n </div>\n </div>\n\n <div class=\"dropdown\">\n <button class=\"dropbtn\">FWD <br> 100</button>\n <div class=\"dropdown-content\">\n <a href=\"billing\">5</a>\n <a href=\"billing\">10</a>\n <a href=\"settings\">20</a>\n <a href=\"billing\">30</a>\n <a href=\"billing\">40</a>\n <a href=\"settings\">50</a>\n <a href=\"settings\">60</a> \n <a href=\"settings\">70</a> \n <a href=\"settings\">80</a>\n <a href=\"settings\">90</a>\n <a href=\"settings\">100</a>\n </div>\n </div> \n\n <div class=\"dropdown\">\n <button class=\"dropbtn\">REV<br> 0.8</button>\n </div>\n \n </div>\n</template>\n\n<script>\nexport default {\n name: \"App\",\n components: {},\n};\n</script>\n\n<style>\n#app {\n font-family: Avenir, Helvetica, Arial, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-align: center;\n // color: #2c3e50;\n color: #212121;\n margin-top: 10px;\n}\n\n.dropbtn {\nbackground-color: rgb(33, 33, 33);\ncolor: white;\npadding: 5px;\nfont-size: 14px;\nborder: none;\n}\n\n.dropdown {\nposition: relative;\ndisplay: inline-block;\ncolor: #669A9A;\n}\n\n.dropdown-content {\ndisplay: none;\nposition: absolute;\nbackground-color: rgb(102,154,154);\nmin-width: 0.2em;\nbox-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\nz-index: 1;\n//font-size: 12px;\n}\n\n.dropdown-content a {\ncolor: black;\npadding: 3px 4px;\ntext-decoration: none;\ndisplay: block;\n}\n\n.dropdown-content a:hover {\nbackground-color: #afafaf;\n}\n\n.dropdown:hover .dropdown-content {\ndisplay: block;\n}\n\n.dropdown:hover .dropbtn {\nbackground-color: #afafaf;\n}\n</style>\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":450,"y":260,"wires":[[]]},{"id":"2509d11ee469ea92","type":"inject","z":"8b4af5c9cd375639","name":"s6","props":[{"p":"payload"},{"p":"ui_update.label","v":"S6","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"-91","payloadType":"num","x":450,"y":380,"wires":[["ccc684d7a16434c3"]]},{"id":"acf97e35827a273f","type":"inject","z":"8b4af5c9cd375639","name":"S9+","props":[{"p":"payload"},{"p":"ui_update.label","v":"S9+10","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"-63","payloadType":"num","x":450,"y":460,"wires":[["ccc684d7a16434c3"]]},{"id":"53a7b384fa07c1b2","type":"inject","z":"8b4af5c9cd375639","name":"S1","props":[{"p":"payload"},{"p":"ui_update.label","v":"S1","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"-121","payloadType":"num","x":450,"y":300,"wires":[["ccc684d7a16434c3"]]},{"id":"885dd5f80ca21221","type":"inject","z":"8b4af5c9cd375639","name":"S9","props":[{"p":"payload"},{"p":"ui_update.label","v":"S9","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"-73","payloadType":"num","x":450,"y":420,"wires":[["ccc684d7a16434c3"]]},{"id":"6f65a0ba158e2c1d","type":"inject","z":"8b4af5c9cd375639","name":"s5","props":[{"p":"payload"},{"p":"ui_update.label","v":"S5","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"-97","payloadType":"num","x":450,"y":340,"wires":[["ccc684d7a16434c3"]]},{"id":"d8941eebadd7c34b","type":"inject","z":"8b4af5c9cd375639","name":"S9+20","props":[{"p":"payload"},{"p":"ui_update.label","v":"S9+20","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"-51","payloadType":"num","x":450,"y":500,"wires":[["ccc684d7a16434c3"]]},{"id":"ccc684d7a16434c3","type":"ui-gauge-linear","z":"8b4af5c9cd375639","name":"sMeter","group":"95e26f1abb509c3d","order":3,"width":0,"height":0,"min":"-130","max":"-30","ticks":[],"colors":[{"size":100,"color":"rgb(27, 0, 230)"},{"size":100,"color":"rgb(27, 0, 230)"},{"size":100,"color":"rgb(27, 0, 230)"},{"size":100,"color":"rgb(27, 0, 230)"},{"size":100,"color":"rgb(0, 119, 230)"},{"size":100,"color":"rgb(0, 119, 230)"},{"size":100,"color":"rgb(0, 119, 230)"},{"size":100,"color":"rgb(16, 105, 249)"},{"size":100,"color":"rgb(0, 119, 230)"},{"size":100,"color":"rgb(0, 119, 230)"},{"size":100,"color":"rgb(16, 105, 249)"},{"size":100,"color":"rgb(0, 227, 0)"},{"size":100,"color":"rgb(0, 227, 0)"},{"size":100,"color":"rgb(0, 227, 0)"},{"size":100,"color":"rgb(0, 227, 0)"},{"size":100,"color":"rgb(0, 227, 0)"},{"size":100,"color":"rgb(0, 227, 0)"},{"size":100,"color":"rgb(0, 227, 0)"},{"size":100,"color":"rgb(0, 227, 0)"},{"size":100,"color":"rgb(0, 227, 0)"},{"size":100,"color":"rgb(0, 227, 0)"},{"size":100,"color":"rgb(0, 227, 0)"},{"size":100,"color":"rgb(0, 227, 0)"},{"size":100,"color":"rgb(0, 227, 0)"},{"size":100,"color":"rgb(255, 169, 22)"},{"size":100,"color":"rgb(255, 169, 22)"},{"size":100,"color":"rgb(255, 169, 22)"},{"size":100,"color":"rgb(255, 169, 22)"},{"size":100,"color":"rgb(255, 169, 22)"},{"size":100,"color":"rgb(255, 169, 22)"},{"size":100,"color":"rgb(255, 169, 22)"},{"size":100,"color":"rgb(255, 169, 22)"},{"size":100,"color":"rgb(255, 169, 22)"},{"size":100,"color":"rgb(255, 169, 22)"},{"size":100,"color":"rgb(255, 169, 22)"},{"size":100,"color":"rgb(255, 169, 22)"},{"size":100,"color":"rgb(255, 0, 0)"},{"size":100,"color":"rgb(255, 0, 0)"},{"size":100,"color":"rgb(255, 0, 0)"},{"size":100,"color":"rgb(255, 0, 0)"},{"size":100,"color":"rgb(255, 0, 0)"},{"size":100,"color":"rgb(255, 0, 0)"},{"size":100,"color":"rgb(255, 0, 0)"},{"size":100,"color":"rgb(255, 0, 0)"},{"size":100,"color":"rgb(255, 0, 0)"},{"size":100,"color":"rgb(255, 0, 0)"},{"size":100,"color":"rgb(255, 0, 0)"},{"size":100,"color":"rgb(255, 0, 0)"},{"size":100,"color":"rgb(255, 0, 0)"},{"size":100,"color":"rgb(255, 0, 0)"}],"zeroCrossColors":["#ff4c16","#00e300"],"mode":"default","bar":"segmented","minLabel":"","maxLabel":"","label":"Gauge Linear","icon":"","unit":"dBm","dim":0.2,"property":"payload","decimals":"0","zeros":true,"myclass":"","x":610,"y":320,"wires":[]},{"id":"95e26f1abb509c3d","type":"ui-group","name":"Dashboard","page":"1c985c55ed046d77","width":"4","height":1,"order":1,"showTitle":false,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"1c985c55ed046d77","type":"ui-page","name":"Flex 8600","ui":"08074b8d623f2ed5","path":"/page2","icon":"radio","layout":"flex","theme":"129e99574def90a3","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":2,"className":"","visible":true,"disabled":false},{"id":"08074b8d623f2ed5","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true},{"id":"129e99574def90a3","type":"ui-theme","name":"Another Theme","colors":{"surface":"#212121","primary":"#212121","bgPage":"#212121","groupBg":"#212121","groupOutline":"#212121"},"sizes":{"pagePadding":"9px","groupGap":"12px","groupBorderRadius":"9px","widgetGap":"6px","density":"default"}}]
This code does not do anything yet except show the Ui that I am trying to develop.
Regards
Thanks, You got me on the right track. I had to modify the css to...
<style>
html {
overflow-y: hidden;
}
</style>
