Dashboard 2.0: Layout : Fixed : Am I the only one who struggled with this?

Dashboard
1

Like many others, I had to migrate my 1.0 dashboard to 2.0. In Dash 1.0, we had a 1x1 widget with a horizontal size of 48px and a vertical size of 48px, creating a square. This allowed me to find a compromise between PC and smartphone screens.

pc smart
pc smart1797Ă—922 177 KB

Dashboard 1.0: PC vs Smartphone : great ! :star_struck:

When I upgraded to Dash 2.0, I saw the "Fixed Layout" and thought, "Great, we have the same thing as Dash 1.0"... But no !

image
image672Ă—150 14.8 KB

Why, in Dash 2.0, with a "Fixed" Layout and a default Theming > Row Height of 48px (the same settings as Dash 1.0), did you add flexibility below 576px?!

I understand that Dash 2.0's strength lies in its flexibility (Grid, Notebook, or Tabs modes), but please allow us to have 100% fixed pixels in "Fixed" mode at any screen width!

A 1x1 widget (48px x 48px, or "(where our default row height is 45px)" as seen in the manual)) must be square, not a short or long rectangle.
flex
I can't do anything with this! We're going from 4 to 3 columns for the same group width. 1x1 widgets are rectangular, or even very rectangular, depending on the screen width which isn't right.

So I'm racking my brain trying to optimize the widget's fill as precisely as possible, but it's going to overflow or have a large useless gap when going from 3 to 4 columns, which we didn't ask for!

Please make the "Fixed" x-column mode truly fixed, like in Dash 1.0 with 1x1 squares, not rectangles!

Thank you.

2

Oh yeah,
It's just a CSS to learn...

image
image649Ă—616 23.9 KB

3

See the comment at the start of the documentation for Fixed layout
" Note: This layout still needs work to make it more flexible and practical, it is advised to use another layout for now."

@Steve-Mcl I don't see an Issue on github to document the requirements and implement Fixed layout. Should there be one?

4

@hotNipi Thank you for the reply. I was able to go a little further to force the width to the size of my smartphone.

/* DĂ©finit le nombre de colonnes */
.nrdb-layout--flex {
    --layout-columns: 6 !important;
}

/* Force la largeur des groupes Ă  320px et empĂŞche l'Ă©tirement */
.nrdb-ui-group {
    flex: 0 0 320px !important;
    max-width: 320px !important;
    min-width: 320px !important;
}

fixe
This is the behavior I expected from a "Fixed" Layout.

fixe smart
fixe smart1080Ă—2400 90.8 KB

Smartphone view: readable, usable in 6 columns. No need to switch to 3 columns !

comp 2 to 1
comp 2 to 1868Ă—228 27.2 KB

@hotNipi What do you recommend I do to reduce the border on the right and left so that the widgets touch the edge of the group and distribute the widgets in the remaining space ? Gemini was unable to help me :laughing:

@Colin

See the comment at the start of the documentation for Fixed layout

Yes, I saw that section at the beginning of the documentation. The goal is to evolve things, or rather, to offer support identical to that of Dash 1.0 for those who, like me, manage complex dashboards and have to rewrite everything… and who struggle to manage flexibility.

5

Padding provides several valuable features, especially in terms of readability, and ignoring it is not recommended. However, the size can be easily changed.

.nrdb-layout--flex .v-card-text {
    padding-inline: 3px;
}

The solution may not be absolute and may lead to side effects

Fancy..

6

Awesome !

fixe espacé
here is a real “Fixed” Layout like Dash 1.0

the CSS code for nostalgic people like me : :grinning_face_with_smiling_eyes:

/* DĂ©finit le nombre de colonnes */
.nrdb-layout--flex {
    --layout-columns: 6 !important;
}

/* Force la largeur des groupes Ă  330px et empĂŞche l'Ă©tirement */
.nrdb-ui-group {
    flex: 0 0 320px !important;
    max-width: 320px !important;
    min-width: 320px !important;
}

.nrdb-layout--flex .v-card-text {
    padding-inline: 1px;
}

image
image519Ă—881 16.3 KB

adjusting the theming

@hotNipi one last thing to conclude this Dash 1.0 like: Do you think it is possible to do:
colapse
by clicking on the group name or something like that?
And there, you will be the sun of my day :laughing:

2 Likes
7

That should be dashboards functionality out of box.

Anyway, I tried and yes it is possible to do.
But I am already somebody's sun and that is not subject of change.
Being a sun just alone doesnt pay any of the bills. So I don't share full solution.

Find my post about how to add icons to card header.
Examine.
You'll need one per group.

Icon can be clickable.
On click change the state. (boolean "opened")
With that state change also change the icon . "mdi-menu-up" -> mdi-menu-down (and vice versa)


            toggle(e) {
                if(this.opened){  
                    this.opened = false                
                    this.icon = "mdi-menu-down"
                }
                else{
                    this.opened = true  
                    this.icon = "mdi-menu-up"
                }
            }

Forr css add a rule

.v-card:has(.mdi-menu-down) .v-card-text{
   display:none;
}

Happy coding.

8

Anyone want to take a stab?

1 Like
9

Thanks for your hints, I've come up with this:
dropdown

[
    {
        "id": "05655f9a44827b05",
        "type": "ui-button",
        "z": "fe2c7bc6.bd49c8",
        "group": "fb354f34b521dacf",
        "name": "delete",
        "label": "",
        "order": 2,
        "width": "1",
        "height": "1",
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "delete",
        "iconPosition": "left",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "red",
        "textColor": "",
        "iconColor": "",
        "enableClick": true,
        "enablePointerdown": false,
        "pointerdownPayload": "",
        "pointerdownPayloadType": "str",
        "enablePointerup": false,
        "pointerupPayload": "",
        "pointerupPayloadType": "str",
        "x": 5740,
        "y": 3110,
        "wires": [
            []
        ]
    },
    {
        "id": "83d92044e36c5c81",
        "type": "ui-button",
        "z": "fe2c7bc6.bd49c8",
        "group": "fb354f34b521dacf",
        "name": "<<",
        "label": "",
        "order": 3,
        "width": "1",
        "height": "1",
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "rewind",
        "iconPosition": "left",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "grey",
        "textColor": "",
        "iconColor": "",
        "enableClick": true,
        "enablePointerdown": false,
        "pointerdownPayload": "",
        "pointerdownPayloadType": "str",
        "enablePointerup": false,
        "pointerupPayload": "",
        "pointerupPayloadType": "str",
        "x": 5860,
        "y": 3110,
        "wires": [
            []
        ]
    },
    {
        "id": "c904673d8292ee99",
        "type": "ui-button",
        "z": "fe2c7bc6.bd49c8",
        "group": "fb354f34b521dacf",
        "name": "<",
        "label": "",
        "order": 4,
        "width": "1",
        "height": "1",
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "chevron-left",
        "iconPosition": "left",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "",
        "textColor": "",
        "iconColor": "",
        "enableClick": true,
        "enablePointerdown": false,
        "pointerdownPayload": "",
        "pointerdownPayloadType": "str",
        "enablePointerup": false,
        "pointerupPayload": "",
        "pointerupPayloadType": "str",
        "x": 5980,
        "y": 3110,
        "wires": [
            []
        ]
    },
    {
        "id": "68970aa8a2ee70f1",
        "type": "ui-button",
        "z": "fe2c7bc6.bd49c8",
        "group": "fb354f34b521dacf",
        "name": ">",
        "label": "",
        "order": 6,
        "width": "1",
        "height": "1",
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "chevron-right",
        "iconPosition": "left",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "",
        "textColor": "",
        "iconColor": "",
        "enableClick": true,
        "enablePointerdown": false,
        "pointerdownPayload": "",
        "pointerdownPayloadType": "str",
        "enablePointerup": false,
        "pointerupPayload": "",
        "pointerupPayloadType": "str",
        "x": 6100,
        "y": 3110,
        "wires": [
            []
        ]
    },
    {
        "id": "20e81a36e8ca49bd",
        "type": "ui-button",
        "z": "fe2c7bc6.bd49c8",
        "group": "fb354f34b521dacf",
        "name": ">>",
        "label": "",
        "order": 7,
        "width": "1",
        "height": "1",
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "fast-forward",
        "iconPosition": "left",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "grey",
        "textColor": "",
        "iconColor": "",
        "enableClick": true,
        "enablePointerdown": false,
        "pointerdownPayload": "",
        "pointerdownPayloadType": "str",
        "enablePointerup": false,
        "pointerupPayload": "",
        "pointerupPayloadType": "str",
        "x": 6220,
        "y": 3110,
        "wires": [
            []
        ]
    },
    {
        "id": "fd62a7a6e4688110",
        "type": "ui-button",
        "z": "fe2c7bc6.bd49c8",
        "group": "fb354f34b521dacf",
        "name": "",
        "label": "button",
        "order": 8,
        "width": "1",
        "height": "1",
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "iconPosition": "left",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "",
        "textColor": "",
        "iconColor": "",
        "enableClick": true,
        "enablePointerdown": false,
        "pointerdownPayload": "",
        "pointerdownPayloadType": "str",
        "enablePointerup": false,
        "pointerupPayload": "",
        "pointerupPayloadType": "str",
        "x": 6340,
        "y": 3110,
        "wires": [
            []
        ]
    },
    {
        "id": "4b90c0f6cf0d5439",
        "type": "ui-template",
        "z": "fe2c7bc6.bd49c8",
        "group": "fb354f34b521dacf",
        "page": "",
        "ui": "",
        "name": "Colapse home>action",
        "order": 5,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<template>\n    <Teleport v-if=\"mounted\" :to=\"target\">\n        <div :class=\"positionClass\" @click=\"toggle\" style=\"cursor: pointer;\">\n            <v-icon aria-hidden=\"false\">{{icon}}</v-icon>\n        </div>\n    </Teleport>\n</template>\n\n<script>\n    export default {\n        data() {           \n            return {\n                mounted: false,\n                target: \"\",\n                position: \"right\", //\"left\"\n                icon: \"mdi-menu-down\",\n                opened: false // AJOUT : Ă©tat d'ouverture/fermeture\n            }\n        },\n        computed: {        \n            positionClass: function () {\n                return this.position == \"left\" ? \"v-card-item__prepend\" : \"v-card-item__append\"\n            }\n        },\n        watch: {\n            msg: function () {\n                //\n            }\n        },\n        mounted(){            \n            this.target = '#nrdb-ui-group-'+this.props.group+' .v-card-item'\n            this.mounted = true            \n        },\n        methods: { // CORRECTION : la fonction toggle doit ĂŞtre dans methods\n            toggle(e) {\n                if(this.opened){\n                    this.opened = false\n                    this.icon = \"mdi-menu-down\"\n                }\n                else{\n                    this.opened = true\n                    this.icon = \"mdi-menu-up\"\n                }\n            }\n        }\n    }\n</script>\n<style>\n    .hidden-template {\n        display: none !important;\n    }\n    .v-card:has(.mdi-menu-down) .v-card-text{\n        display: none;\n    }\n</style>",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "hidden-template",
        "x": 5920,
        "y": 3060,
        "wires": [
            []
        ]
    },
    {
        "id": "50b91ca9e9f22f51",
        "type": "ui-dropdown",
        "z": "fe2c7bc6.bd49c8",
        "group": "fb354f34b521dacf",
        "name": "",
        "label": "Select Option:",
        "tooltip": "",
        "order": 1,
        "width": "6",
        "height": "1",
        "passthru": false,
        "multiple": false,
        "chips": false,
        "clearable": false,
        "options": [
            {
                "label": "lab1",
                "value": "val1",
                "type": "str"
            },
            {
                "label": "lab2",
                "value": "val2",
                "type": "str"
            }
        ],
        "payload": "",
        "topic": "topic",
        "topicType": "msg",
        "className": "",
        "typeIsComboBox": true,
        "msgTrigger": "onChange",
        "x": 5930,
        "y": 3160,
        "wires": [
            []
        ]
    },
    {
        "id": "fb354f34b521dacf",
        "type": "ui-group",
        "name": "Action",
        "page": "62f0d5d935a88a45",
        "width": "6",
        "height": 1,
        "order": 3,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "62f0d5d935a88a45",
        "type": "ui-page",
        "name": "home",
        "ui": "3dcb17d3fbb77cb1",
        "path": "/page1",
        "icon": "home",
        "layout": "flex",
        "theme": "2da75e915972c00d",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "4"
            },
            {
                "name": "Small Desktop",
                "px": "800",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "3dcb17d3fbb77cb1",
        "type": "ui-base",
        "name": "Page flowfuse",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-control",
            "ui-notification"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "temporary",
        "titleBarStyle": "default",
        "showReconnectNotification": true,
        "notificationDisplayTime": 5,
        "showDisconnectNotification": true,
        "allowInstall": true
    },
    {
        "id": "2da75e915972c00d",
        "type": "ui-theme",
        "name": "Theme black",
        "colors": {
            "surface": "#177278",
            "primary": "#0da3d5",
            "bgPage": "#111111",
            "groupBg": "#333333",
            "groupOutline": "#787878"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "1px",
            "groupGap": "4px",
            "groupBorderRadius": "2px",
            "widgetGap": "3px"
        }
    },
    {
        "id": "444913b779fc80bf",
        "type": "global-config",
        "env": [],
        "modules": {
            "@flowfuse/node-red-dashboard": "1.30.2"
        }
    }
]

As soon as I add a dropdown node, it breaks the functionality !?

I need to disable all the "collapse/expand ui-group" templates present for each group on the flow Otherwise, I cannot use the collapse/expand functionality at the same time as dropdown ...I must have messed up somewhere ?

10

I don't have computer to check but if the drop-down uses same icon - mdi-menu-up, then I'd guess it may break the thing easily. Means that the CSS must be made more specific.