Two columns on dashboard 2

[gerry]

Ok, for quite literally weeks I have trying to get stuff moved to dashboard 2. The reason I haven't gotten anything moved over is my total and complete inability to setup a page with two columns. Yes, I cannot get something as simple as two columns on a page. In desperation I am throwing myself on the mercy of the forum. Here's the flow

[{"id":"128c0c1b0c591289","type":"tab","label":"Flow 1","disabled":false,"info":"","env":[]},{"id":"c7ad4dd949a286f6","type":"ui-template","z":"128c0c1b0c591289","group":"","page":"34f2fd11671cbad9","ui":"","name":"test","order":0,"width":0,"height":0,"head":"","format":"<template>\n<div class=\"row\">\n    <div class=\"column\">test1</div>\n    <div class=\"column\">test2</div>\n</div>\n\n\n</template>\n\n<script>\n    export default {\n        data() {\n            // define variables available component-wide\n            // (in <template> and component functions)\n            return {\n                count: 0\n            }\n        },\n        watch: {\n            // watch for any changes of \"count\"\n            count: function () {\n                if (this.count % 5 === 0) {\n                    this.send({payload: 'Multiple of 5'})\n                }\n            }\n        },\n        computed: {\n            // automatically compute this variable\n            // whenever VueJS deems appropriate\n            formattedCount: function () {\n                return this.count + 'Apples'\n            }\n        },\n        methods: {\n            // expose a method to our <template> and Vue Application\n            increase: function () {\n                this.count++\n            }\n        },\n        mounted() {\n            // code here when the component is first loaded\n        },\n        unmounted() {\n            // code here when the component is removed from the Dashboard\n            // i.e. when the user navigates away from the page\n        }\n    }\n</script>\n<style>\n    /* define any styles here - supports raw CSS */\n    .my-class {\n        color: red;\n    }\n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"widget:page","className":"","x":350,"y":200,"wires":[[]]},{"id":"34f2fd11671cbad9","type":"ui-page","name":"Page Name","ui":"be93d1640cb1fd4c","path":"/test","icon":"home","layout":"grid","theme":"89aa15a0aabc5936","order":-1,"className":"","visible":"true","disabled":"false"},{"id":"be93d1640cb1fd4c","type":"ui-base","name":"test","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"default"},{"id":"89aa15a0aabc5936","type":"ui-theme","name":"Theme Name","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

Maybe I just don't understand what a row or column is but I think the text should be side by side not over each other? I picked this code up off of W3 schools.
[edit] Pi3B running Bookworm, node red 3.1.9 and nodejs 20., installed using the install script

[Steve-Mcl]

@gerry

code up off of W3 schools

By the looks of it, you didn't copy the accompanying CSS styles for row and column

You would be better off visiting the vuetify help since they provide a squillion examples using components and classes that are already built in.

Try it the examples here: Grid system — Vuetify

Edit
For completeness, dashboard 2 uses vuetify under the hood. Pretty much Every example on there pages work on dashboard 2 (also mentioned in the dashboard 2 docs)

[joepavitt]

Noticing that you're not using the D2.0 groups, but ui-scoped templates. Is that intentional? Are you just looking to build in your own UI entirely?

If you group-scope the templates, then the groups they're inside can be given a width of "6", as the page has 12 columns by default. This will ensure they take up 50% of the acreen width each, although on lower screen widths, it will be responsive and they'll stack.

[gerry]

Frankly it's obvious I have no idea what I'm doing. I really don't want to move to db2 but I think the writing is on the wall that sooner or later I'll have to. I have googled forever about vue and have over a dozen bookmarks. My db1 dashboards look great because a long time ago someone posted their project and graciously sent me their code which I unashamedly modified and used. I need to keep node red working as it runs a lot of things in the house. Several months ago I started to move to db2 and hit a wall but now I need to keep pecking at this when I can. My big concern is that vue is today's code and tomorrow it will be something else. I spent weeks doing my first dashboard and it looks like weeks on my next. OK, I feel much better now. Thanks for the therapy

[Paul-Reed]

@gerry

My big concern is that vue is today's code and tomorrow it will be something else

I think it's fair to say that Dashboard 2 will be around for many years, as FlowFuse have invested heavily in it's development (Joe doesn't come cheap ).
DB2's structure is heavily reliant upon Vue, and removing it, and using something different would not be practical, so it's here to stay, love it or hate it.

I've come to the conclusion that Vue is also above my pay grade, however there is a growing number of other forum members who have grasped Vue, and are kindly providing lots of forum support.

[gerry]

And by the way the CSS thingie did fix my column problem
Thanks