Auto adjust text in dashboard

Hi all!.

I'm working with dashboard feature and i need to give it a more confortable kinda view, now is messy and i cannot get it right automaticaly.

This is what i have so far...

I share the flows.

[
    {
        "id": "b3b8557c097178e9",
        "type": "http request",
        "z": "3d7e2cca152912c1",
        "name": "",
        "method": "GET",
        "ret": "obj",
        "paytoqs": "ignore",
        "url": "",
        "tls": "",
        "persist": false,
        "proxy": "",
        "authType": "",
        "senderr": false,
        "x": 530,
        "y": 180,
        "wires": [
            [
                "048dd825077f40ad"
            ]
        ]
    },
    {
        "id": "b5e93afdd895c3c3",
        "type": "change",
        "z": "3d7e2cca152912c1",
        "name": "seteo url PROD",
        "rules": [
            {
                "t": "set",
                "p": "url",
                "pt": "msg",
                "to": "https://www.pepepe.com",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 340,
        "y": 180,
        "wires": [
            [
                "b3b8557c097178e9"
            ]
        ]
    },
    {
        "id": "8a8ebc22f11df918",
        "type": "ui_button",
        "z": "3d7e2cca152912c1",
        "name": "",
        "group": "5b583c22ea6322f1",
        "order": 7,
        "width": 5,
        "height": 1,
        "passthru": false,
        "label": "Test Servicio PRD",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "update",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 150,
        "y": 520,
        "wires": [
            [
                "a68fc424cd511cae"
            ]
        ]
    },
    {
        "id": "8c2d4ac8f2e99d8e",
        "type": "ui_text",
        "z": "3d7e2cca152912c1",
        "group": "5b583c22ea6322f1",
        "order": 2,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "URL: ",
        "format": "{{msg.url}}",
        "layout": "row-left",
        "className": "",
        "x": 110,
        "y": 340,
        "wires": []
    },
    {
        "id": "f0bdff09f6acd775",
        "type": "http request",
        "z": "3d7e2cca152912c1",
        "name": "",
        "method": "GET",
        "ret": "obj",
        "paytoqs": "ignore",
        "url": "",
        "tls": "",
        "persist": false,
        "proxy": "",
        "authType": "",
        "senderr": false,
        "x": 530,
        "y": 220,
        "wires": [
            [
                "048dd825077f40ad"
            ]
        ]
    },
    {
        "id": "39cf040ce239203c",
        "type": "change",
        "z": "3d7e2cca152912c1",
        "name": "seteo url PROD",
        "rules": [
            {
                "t": "set",
                "p": "url",
                "pt": "msg",
                "to": "https://serviciosweb.diri.mx/webresources/consultainfodn/ivr",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 340,
        "y": 220,
        "wires": [
            [
                "f0bdff09f6acd775"
            ]
        ]
    },
    {
        "id": "140f7a258216e244",
        "type": "ui_text",
        "z": "3d7e2cca152912c1",
        "group": "5b583c22ea6322f1",
        "order": 5,
        "width": "0",
        "height": "0",
        "name": "",
        "label": "Accion de la integracion:  ",
        "format": "Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer.",
        "layout": "row-left",
        "className": "",
        "x": 170,
        "y": 380,
        "wires": []
    },
    {
        "id": "e71dfc9728a1d0c5",
        "type": "ui_text",
        "z": "3d7e2cca152912c1",
        "group": "5b583c22ea6322f1",
        "order": 3,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "link a carpeta Gdrive",
        "format": "http://gdrive.com",
        "layout": "row-left",
        "className": "",
        "x": 160,
        "y": 420,
        "wires": []
    },
    {
        "id": "a8ce6539eafc9bcf",
        "type": "ui_text",
        "z": "3d7e2cca152912c1",
        "group": "5b583c22ea6322f1",
        "order": 4,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Salida al servicio:",
        "format": "PUBLICO",
        "layout": "row-left",
        "className": "",
        "x": 150,
        "y": 460,
        "wires": []
    },
    {
        "id": "048dd825077f40ad",
        "type": "ui_button",
        "z": "3d7e2cca152912c1",
        "name": "",
        "group": "d033b283fa16a7ea",
        "order": 1,
        "width": 0,
        "height": 0,
        "passthru": false,
        "label": "Actualizar URLs",
        "tooltip": "Presionar si no se visualiza el campo URL",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "update",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 140,
        "y": 180,
        "wires": [
            [
                "b5e93afdd895c3c3",
                "39cf040ce239203c"
            ]
        ]
    },
    {
        "id": "b05a7ddeeba89d61",
        "type": "ui_text",
        "z": "3d7e2cca152912c1",
        "group": "5b583c22ea6322f1",
        "order": 1,
        "width": 15,
        "height": 1,
        "name": "",
        "label": "Numero de caso: ",
        "format": "1234567",
        "layout": "row-left",
        "className": "",
        "x": 150,
        "y": 300,
        "wires": []
    },
    {
        "id": "5b583c22ea6322f1",
        "type": "ui_group",
        "name": "Integracion pruebaa prueba pruebaa",
        "tab": "d92ab4b4.55f5c8",
        "order": 2,
        "disp": true,
        "width": "15",
        "collapse": true,
        "className": ""
    },
    {
        "id": "d033b283fa16a7ea",
        "type": "ui_group",
        "name": "Tools",
        "tab": "d92ab4b4.55f5c8",
        "order": 3,
        "disp": true,
        "width": "4",
        "collapse": true,
        "className": ""
    },
    {
        "id": "d92ab4b4.55f5c8",
        "type": "ui_tab",
        "name": "DEV | URL Integraciones",
        "icon": "launch",
        "order": 2,
        "disabled": false,
        "hidden": false
    }
]

I need an automated (maybe with templates) way of ordering all the main titles content.
I know it can be done here:

But i want to do that automatically.

Thanks a lot in advance!.

Regards!

anyone?

Thanks!

Dashboard layout is static. No way to create any kind of smartness on top of grid layout in use. You even accept it or create your dashboard from scratch. The uibuilder is best tool for that.

OK, i mean, maybe what i want to do can be done with templates or so. I don't pretend to have a fully smartness and automated dashboard, simply just text and to be prepared to adjust in a way to be reable.

The main goal is to let other people post information without any pain in the middle.

Regads!

You may use the possibility to set a class in the elements configuration. Then add a template node to your header and fill in the values. For this you could use the element-ids, too.

This could be a start:

[
    {
        "id": "7f352191de985456",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "b4a0b1e78a363e6b",
        "type": "http request",
        "z": "7f352191de985456",
        "name": "",
        "method": "GET",
        "ret": "obj",
        "paytoqs": "ignore",
        "url": "",
        "tls": "",
        "persist": false,
        "proxy": "",
        "authType": "",
        "senderr": false,
        "x": 790,
        "y": 260,
        "wires": [
            [
                "876b1bc1df914b42"
            ]
        ]
    },
    {
        "id": "bd37660db06f5b0b",
        "type": "change",
        "z": "7f352191de985456",
        "name": "seteo url PROD",
        "rules": [
            {
                "t": "set",
                "p": "url",
                "pt": "msg",
                "to": "https://www.pepepe.com",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 600,
        "y": 260,
        "wires": [
            [
                "b4a0b1e78a363e6b"
            ]
        ]
    },
    {
        "id": "c29cf2cf549bc894",
        "type": "ui_button",
        "z": "7f352191de985456",
        "name": "",
        "group": "d033b283fa16a7ea",
        "order": 6,
        "width": 5,
        "height": 1,
        "passthru": false,
        "label": "Test Servicio PRD",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "update",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 410,
        "y": 600,
        "wires": [
            []
        ]
    },
    {
        "id": "09f897f18194610d",
        "type": "ui_text",
        "z": "7f352191de985456",
        "group": "5b583c22ea6322f1",
        "order": 2,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "URL: ",
        "format": "{{msg.url}}",
        "layout": "row-left",
        "className": "main-title-content",
        "x": 370,
        "y": 420,
        "wires": []
    },
    {
        "id": "7ac08cb099ba0ea8",
        "type": "http request",
        "z": "7f352191de985456",
        "name": "",
        "method": "GET",
        "ret": "obj",
        "paytoqs": "ignore",
        "url": "",
        "tls": "",
        "persist": false,
        "proxy": "",
        "authType": "",
        "senderr": false,
        "x": 790,
        "y": 300,
        "wires": [
            [
                "876b1bc1df914b42"
            ]
        ]
    },
    {
        "id": "1e7c49f02fbb9fee",
        "type": "change",
        "z": "7f352191de985456",
        "name": "seteo url PROD",
        "rules": [
            {
                "t": "set",
                "p": "url",
                "pt": "msg",
                "to": "https://serviciosweb.diri.mx/webresources/consultainfodn/ivr",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 600,
        "y": 300,
        "wires": [
            [
                "7ac08cb099ba0ea8"
            ]
        ]
    },
    {
        "id": "8fa68eccc720e301",
        "type": "ui_text",
        "z": "7f352191de985456",
        "group": "5b583c22ea6322f1",
        "order": 5,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Accion de la integracion:  ",
        "format": "Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer.",
        "layout": "row-left",
        "className": "main-title-content",
        "x": 430,
        "y": 460,
        "wires": []
    },
    {
        "id": "385c3f02f604beba",
        "type": "ui_text",
        "z": "7f352191de985456",
        "group": "5b583c22ea6322f1",
        "order": 3,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "link a carpeta Gdrive",
        "format": "http://gdrive.com",
        "layout": "row-left",
        "className": "main-title-content",
        "x": 420,
        "y": 500,
        "wires": []
    },
    {
        "id": "93c8ad600d13695e",
        "type": "ui_text",
        "z": "7f352191de985456",
        "group": "5b583c22ea6322f1",
        "order": 4,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Salida al servicio:",
        "format": "PUBLICO",
        "layout": "row-left",
        "className": "main-title-content",
        "x": 410,
        "y": 540,
        "wires": []
    },
    {
        "id": "876b1bc1df914b42",
        "type": "ui_button",
        "z": "7f352191de985456",
        "name": "",
        "group": "d033b283fa16a7ea",
        "order": 1,
        "width": 0,
        "height": 0,
        "passthru": false,
        "label": "Actualizar URLs",
        "tooltip": "Presionar si no se visualiza el campo URL",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "update",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 400,
        "y": 260,
        "wires": [
            [
                "bd37660db06f5b0b",
                "1e7c49f02fbb9fee"
            ]
        ]
    },
    {
        "id": "dfa8204d6bd2be33",
        "type": "ui_text",
        "z": "7f352191de985456",
        "group": "5b583c22ea6322f1",
        "order": 1,
        "width": 15,
        "height": 1,
        "name": "",
        "label": "Numero de caso: ",
        "format": "1234567",
        "layout": "row-left",
        "className": "main-title-content",
        "x": 410,
        "y": 380,
        "wires": []
    },
    {
        "id": "1a0d99df43d4d55b",
        "type": "ui_template",
        "z": "7f352191de985456",
        "group": "75ebc3ea4eb4a464",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "format": "<style>\n    \n    .main-title-content{\n        align-items: flex-start !important;\n        height: auto !important;\n    }\n    \n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 460,
        "y": 680,
        "wires": [
            []
        ]
    },
    {
        "id": "d033b283fa16a7ea",
        "type": "ui_group",
        "name": "Tools",
        "tab": "d92ab4b4.55f5c8",
        "order": 3,
        "disp": true,
        "width": "4",
        "collapse": true,
        "className": ""
    },
    {
        "id": "5b583c22ea6322f1",
        "type": "ui_group",
        "name": "Integracion pruebaa prueba pruebaa",
        "tab": "d92ab4b4.55f5c8",
        "order": 1,
        "disp": true,
        "width": "15",
        "collapse": true,
        "className": "main-area"
    },
    {
        "id": "75ebc3ea4eb4a464",
        "type": "ui_group",
        "name": "Mainfolder",
        "tab": "",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "d92ab4b4.55f5c8",
        "type": "ui_tab",
        "name": "DEV | URL Integraciones",
        "icon": "launch",
        "order": 2,
        "disabled": false,
        "hidden": false
    }
]

And you're right, it's possible to edit a template node as you like to get something more flexible.

Thanks a lot for the approach!. I'm conviced that NR has the solution for most of the main goals.

Any further help will be really grateful.

Thanks a lot!

Is there any way to short the gap between this two fields?.

image

Thanks a lot!

an example with template node

[
    {
        "id": "a56bde124d673012",
        "type": "tab",
        "label": "ui-temp list",
        "disabled": false,
        "info": ""
    },
    {
        "id": "8fbf6842f1528818",
        "type": "ui_template",
        "z": "a56bde124d673012",
        "group": "c7e1043144be7729",
        "name": "Content",
        "order": 7,
        "width": "15",
        "height": "14",
        "format": "\n<md-content layout=\"column\">\n    <md-list>\n        <md-list-item style=\"height: max-content\" ng-repeat=\"item in arrLog track by $index\">\n            <div class=\"md-list-item-text\" layout=\"column\">\n                <span style=\"text-decoration: underline\">{{item.label}}:</span>\n                <p style=\"white-space: pre-line;\">{{item.value}}</p>\n                <span style=\"height: 1em\"></span>\n            </div>\n        </md-list-item>\n    </md-list>\n</md-content>\n\n\n<script>\n    (function(scope) {\n        scope.arrLog = [];\n        \n        //handle arriving messages\n        scope.$watch('msg', function(msg) {\n\t\t\t    try{\n        \t\t\t    switch(msg.topic) {\n        \t\t\t        \n            \t\t\t    case \"Content\":\n                                scope.$applyAsync(()=>{\n                                    scope.arrLog = [];\n                                    msg.payload.forEach((currentValue, index, arr)=>{\n                                        scope.arrLog.push(currentValue);\n                                    })\n                                });\n                \t\t\t    break;\n                \t\t\t    \n                \t\t\tcase \"Clear\":\n                \t\t\t    scope.$applyAsync(()=>{\n                \t\t\t        scope.arrLog.length = 0;\n                \t\t\t    });\n                \t\t\t    break;\n\n                \t        default:\n            \t\t\t}\n\t\t\t    }catch(err){\n\t\t\t        //console.error(err);\n\t\t\t    }\n        });\n    })(scope);\n</script>",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 1720,
        "y": 500,
        "wires": [
            []
        ]
    },
    {
        "id": "2f096b8068cfbd2d",
        "type": "ui_button",
        "z": "a56bde124d673012",
        "name": "Clear Button",
        "group": "c2fc6f8ceca1aa7f",
        "order": 6,
        "width": "7",
        "height": "1",
        "passthru": false,
        "label": "Clear",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "fa-trash",
        "payload": "true",
        "payloadType": "bool",
        "topic": "Clear",
        "topicType": "str",
        "x": 990,
        "y": 640,
        "wires": [
            [
                "8fbf6842f1528818",
                "86056727c92d077a"
            ]
        ]
    },
    {
        "id": "3070c17a7eed1205",
        "type": "ui_button",
        "z": "a56bde124d673012",
        "name": "",
        "group": "c2fc6f8ceca1aa7f",
        "order": 4,
        "width": "7",
        "height": "1",
        "passthru": false,
        "label": "Set Content",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "fa-play",
        "payload": "true",
        "payloadType": "bool",
        "topic": "Content",
        "topicType": "str",
        "x": 990,
        "y": 320,
        "wires": [
            [
                "ab714e67bbc44e72"
            ]
        ]
    },
    {
        "id": "ab714e67bbc44e72",
        "type": "function",
        "z": "a56bde124d673012",
        "name": "",
        "func": "msg.payload = [\n    {label:'Numero de caso', value:1234567},\n    {label:'URL', value:''},\n    {label:'link a carpeta Gdrive', value:\"http://gdrive.com\"},\n    {label:'Salida al servicio', value:\"PUBLICO\"},\n    {label:'Accion de la integracion', value:\"Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer\"}\n]\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 1280,
        "y": 320,
        "wires": [
            [
                "86056727c92d077a",
                "8fbf6842f1528818"
            ]
        ]
    },
    {
        "id": "86056727c92d077a",
        "type": "debug",
        "z": "a56bde124d673012",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 1210,
        "y": 500,
        "wires": []
    },
    {
        "id": "c7e1043144be7729",
        "type": "ui_group",
        "name": "Integracion pruebaa prueba pruebaa",
        "tab": "85eef7cbe34c88d0",
        "order": 1,
        "disp": true,
        "width": "15",
        "collapse": false,
        "className": ""
    },
    {
        "id": "c2fc6f8ceca1aa7f",
        "type": "ui_group",
        "name": "Tools",
        "tab": "85eef7cbe34c88d0",
        "order": 2,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "85eef7cbe34c88d0",
        "type": "ui_tab",
        "name": "DEV | URL Integraciones",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

To delete the gap:

in the template node:

<style>
    
    .main-title-content{
        align-items: flex-start !important;
        height: auto !important;
        top: 0px !important;
        position: relative !important;
    }
    
</style>

But I'm no expert in CSS

Thanks a lot.

That's doesnt work, maybe i'm doing something wrong...

works in chrome and microsoft edge

[
    {
        "id": "5c42798006c66cf9",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "3a63b297ecd0e9e4",
        "type": "http request",
        "z": "5c42798006c66cf9",
        "name": "",
        "method": "GET",
        "ret": "obj",
        "paytoqs": "ignore",
        "url": "",
        "tls": "",
        "persist": false,
        "proxy": "",
        "authType": "",
        "senderr": false,
        "x": 790,
        "y": 260,
        "wires": [
            [
                "d98b770c2fb90c66"
            ]
        ]
    },
    {
        "id": "1a750b2523a2b987",
        "type": "change",
        "z": "5c42798006c66cf9",
        "name": "seteo url PROD",
        "rules": [
            {
                "t": "set",
                "p": "url",
                "pt": "msg",
                "to": "https://www.pepepe.com",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 600,
        "y": 260,
        "wires": [
            [
                "3a63b297ecd0e9e4"
            ]
        ]
    },
    {
        "id": "3d5203a487dea667",
        "type": "ui_button",
        "z": "5c42798006c66cf9",
        "name": "",
        "group": "79cab93457991c71",
        "order": 6,
        "width": 5,
        "height": 1,
        "passthru": false,
        "label": "Test Servicio PRD",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "update",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 410,
        "y": 600,
        "wires": [
            []
        ]
    },
    {
        "id": "6285690af5509259",
        "type": "ui_text",
        "z": "5c42798006c66cf9",
        "group": "a6fa0dc0e2e95533",
        "order": 2,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "URL: ",
        "format": "{{msg.url}}",
        "layout": "row-left",
        "className": "main-title-content no-gap",
        "x": 370,
        "y": 420,
        "wires": []
    },
    {
        "id": "fad9f005bc71abed",
        "type": "http request",
        "z": "5c42798006c66cf9",
        "name": "",
        "method": "GET",
        "ret": "obj",
        "paytoqs": "ignore",
        "url": "",
        "tls": "",
        "persist": false,
        "proxy": "",
        "authType": "",
        "senderr": false,
        "x": 790,
        "y": 300,
        "wires": [
            [
                "d98b770c2fb90c66"
            ]
        ]
    },
    {
        "id": "dcaf715cbc1523be",
        "type": "change",
        "z": "5c42798006c66cf9",
        "name": "seteo url PROD",
        "rules": [
            {
                "t": "set",
                "p": "url",
                "pt": "msg",
                "to": "https://serviciosweb.diri.mx/webresources/consultainfodn/ivr",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 600,
        "y": 300,
        "wires": [
            [
                "fad9f005bc71abed"
            ]
        ]
    },
    {
        "id": "e6c04068be74a044",
        "type": "ui_text",
        "z": "5c42798006c66cf9",
        "group": "a6fa0dc0e2e95533",
        "order": 5,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Accion de la integracion:  ",
        "format": "Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer.",
        "layout": "row-left",
        "className": "main-title-content small-gap",
        "x": 430,
        "y": 560,
        "wires": []
    },
    {
        "id": "8e558191773b7ad9",
        "type": "ui_text",
        "z": "5c42798006c66cf9",
        "group": "a6fa0dc0e2e95533",
        "order": 3,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "link a carpeta Gdrive",
        "format": "http://gdrive.com",
        "layout": "row-left",
        "className": "main-title-content no-gap",
        "x": 420,
        "y": 460,
        "wires": []
    },
    {
        "id": "d91e92c9f185d02f",
        "type": "ui_text",
        "z": "5c42798006c66cf9",
        "group": "a6fa0dc0e2e95533",
        "order": 4,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Salida al servicio:",
        "format": "PUBLICO",
        "layout": "row-left",
        "className": "main-title-content no-gap",
        "x": 410,
        "y": 500,
        "wires": []
    },
    {
        "id": "d98b770c2fb90c66",
        "type": "ui_button",
        "z": "5c42798006c66cf9",
        "name": "",
        "group": "79cab93457991c71",
        "order": 1,
        "width": 0,
        "height": 0,
        "passthru": false,
        "label": "Actualizar URLs",
        "tooltip": "Presionar si no se visualiza el campo URL",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "update",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 400,
        "y": 260,
        "wires": [
            [
                "1a750b2523a2b987",
                "dcaf715cbc1523be"
            ]
        ]
    },
    {
        "id": "cbf31fd4257c2515",
        "type": "ui_text",
        "z": "5c42798006c66cf9",
        "group": "a6fa0dc0e2e95533",
        "order": 1,
        "width": 15,
        "height": 1,
        "name": "",
        "label": "Numero de caso: ",
        "format": "1234567",
        "layout": "row-left",
        "className": "main-title-content no-gap",
        "x": 410,
        "y": 380,
        "wires": []
    },
    {
        "id": "cc6931f7fb8c7d79",
        "type": "ui_template",
        "z": "5c42798006c66cf9",
        "group": "75ebc3ea4eb4a464",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "format": "<style>\n    \n    .main-title-content{\n        align-items: flex-start !important;\n        height: auto !important;\n        position: relative !important;\n    }\n    \n    .no-gap{\n        top: 0px !important;\n    }\n    \n    .small-gap{\n        top:3em !important;\n        \n    }\n    \n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 460,
        "y": 680,
        "wires": [
            []
        ]
    },
    {
        "id": "79cab93457991c71",
        "type": "ui_group",
        "name": "Tools",
        "tab": "a89316d6727375a0",
        "order": 3,
        "disp": true,
        "width": "4",
        "collapse": true,
        "className": ""
    },
    {
        "id": "a6fa0dc0e2e95533",
        "type": "ui_group",
        "name": "Integracion pruebaa prueba pruebaa",
        "tab": "a89316d6727375a0",
        "order": 1,
        "disp": true,
        "width": "15",
        "collapse": true,
        "className": "main-area"
    },
    {
        "id": "75ebc3ea4eb4a464",
        "type": "ui_group",
        "name": "Mainfolder",
        "tab": "",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "a89316d6727375a0",
        "type": "ui_tab",
        "name": "DEV | URL Integraciones",
        "icon": "launch",
        "order": 2,
        "disabled": false,
        "hidden": false
    }
]

Now I had time to try some css-styles
I think it should work now with the text widgets

[
    {
        "id": "5c42798006c66cf9",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "3a63b297ecd0e9e4",
        "type": "http request",
        "z": "5c42798006c66cf9",
        "name": "",
        "method": "GET",
        "ret": "obj",
        "paytoqs": "ignore",
        "url": "",
        "tls": "",
        "persist": false,
        "proxy": "",
        "authType": "",
        "senderr": false,
        "x": 790,
        "y": 260,
        "wires": [
            [
                "d98b770c2fb90c66"
            ]
        ]
    },
    {
        "id": "1a750b2523a2b987",
        "type": "change",
        "z": "5c42798006c66cf9",
        "name": "seteo url PROD",
        "rules": [
            {
                "t": "set",
                "p": "url",
                "pt": "msg",
                "to": "https://www.pepepe.com",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 600,
        "y": 260,
        "wires": [
            [
                "3a63b297ecd0e9e4"
            ]
        ]
    },
    {
        "id": "3d5203a487dea667",
        "type": "ui_button",
        "z": "5c42798006c66cf9",
        "name": "",
        "group": "79cab93457991c71",
        "order": 6,
        "width": 5,
        "height": 1,
        "passthru": false,
        "label": "Test Servicio PRD",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "update",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 410,
        "y": 600,
        "wires": [
            []
        ]
    },
    {
        "id": "6285690af5509259",
        "type": "ui_text",
        "z": "5c42798006c66cf9",
        "group": "a6fa0dc0e2e95533",
        "order": 2,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "URL: ",
        "format": "{{msg.url}}",
        "layout": "row-left",
        "className": "main-title-content no-gap",
        "x": 370,
        "y": 420,
        "wires": []
    },
    {
        "id": "fad9f005bc71abed",
        "type": "http request",
        "z": "5c42798006c66cf9",
        "name": "",
        "method": "GET",
        "ret": "obj",
        "paytoqs": "ignore",
        "url": "",
        "tls": "",
        "persist": false,
        "proxy": "",
        "authType": "",
        "senderr": false,
        "x": 790,
        "y": 300,
        "wires": [
            [
                "d98b770c2fb90c66"
            ]
        ]
    },
    {
        "id": "dcaf715cbc1523be",
        "type": "change",
        "z": "5c42798006c66cf9",
        "name": "seteo url PROD",
        "rules": [
            {
                "t": "set",
                "p": "url",
                "pt": "msg",
                "to": "https://serviciosweb.diri.mx/webresources/consultainfodn/ivr",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 600,
        "y": 300,
        "wires": [
            [
                "fad9f005bc71abed"
            ]
        ]
    },
    {
        "id": "e6c04068be74a044",
        "type": "ui_text",
        "z": "5c42798006c66cf9",
        "group": "a6fa0dc0e2e95533",
        "order": 6,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Accion de la integracion:  ",
        "format": "Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer.",
        "layout": "row-left",
        "className": "main-title-content no-gap",
        "x": 430,
        "y": 560,
        "wires": []
    },
    {
        "id": "8e558191773b7ad9",
        "type": "ui_text",
        "z": "5c42798006c66cf9",
        "group": "a6fa0dc0e2e95533",
        "order": 3,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "link a carpeta Gdrive",
        "format": "http://gdrive.com",
        "layout": "row-left",
        "className": "main-title-content no-gap",
        "x": 420,
        "y": 460,
        "wires": []
    },
    {
        "id": "d91e92c9f185d02f",
        "type": "ui_text",
        "z": "5c42798006c66cf9",
        "group": "a6fa0dc0e2e95533",
        "order": 4,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Salida al servicio:",
        "format": "PUBLICO",
        "layout": "row-left",
        "className": "main-title-content no-gap",
        "x": 410,
        "y": 500,
        "wires": []
    },
    {
        "id": "d98b770c2fb90c66",
        "type": "ui_button",
        "z": "5c42798006c66cf9",
        "name": "",
        "group": "79cab93457991c71",
        "order": 1,
        "width": 0,
        "height": 0,
        "passthru": false,
        "label": "Actualizar URLs",
        "tooltip": "Presionar si no se visualiza el campo URL",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "update",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 400,
        "y": 260,
        "wires": [
            [
                "1a750b2523a2b987",
                "dcaf715cbc1523be"
            ]
        ]
    },
    {
        "id": "cbf31fd4257c2515",
        "type": "ui_text",
        "z": "5c42798006c66cf9",
        "group": "a6fa0dc0e2e95533",
        "order": 1,
        "width": 15,
        "height": 1,
        "name": "",
        "label": "Numero de caso: ",
        "format": "1234567",
        "layout": "row-left",
        "className": "main-title-content no-gap",
        "x": 410,
        "y": 380,
        "wires": []
    },
    {
        "id": "cc6931f7fb8c7d79",
        "type": "ui_template",
        "z": "5c42798006c66cf9",
        "group": "75ebc3ea4eb4a464",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "format": "<style>\n    #Tab_DEV_\\7C_URL_Integraciones{\n        height: unset !important;\n    }\n    \n    #DEV_\\7C_URL_Integraciones_Integracion_pruebaa_prueba_pruebaa{\n        height: initial !important;\n    }\n    \n    #DEV_\\7C_URL_Integraciones_Integracion_pruebaa_prueba_pruebaa_cards[style]{\n        height: fit-content !important;\n    }\n    \n    .group-integracion{\n        height: initial !important;\n    }\n    \n    .group-integracion md-card.nr-dashboard-spacer{\n        align-items: flex-start !important;\n        position: relative !important;\n        top: 0px !important;\n        \n    }\n    \n    .main-title-content{\n        align-items: flex-start !important;\n        height: auto !important;\n        position: relative !important;\n    }\n    \n    .no-gap{\n        top: 0px !important;\n    }\n    \n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 460,
        "y": 680,
        "wires": [
            []
        ]
    },
    {
        "id": "f83d063021812bbe",
        "type": "ui_spacer",
        "z": "5c42798006c66cf9",
        "name": "spacer",
        "group": "a6fa0dc0e2e95533",
        "order": 5,
        "width": "1",
        "height": "1"
    },
    {
        "id": "79cab93457991c71",
        "type": "ui_group",
        "name": "Tools",
        "tab": "a89316d6727375a0",
        "order": 3,
        "disp": true,
        "width": "4",
        "collapse": true,
        "className": ""
    },
    {
        "id": "a6fa0dc0e2e95533",
        "type": "ui_group",
        "name": "Integracion pruebaa prueba pruebaa",
        "tab": "a89316d6727375a0",
        "order": 2,
        "disp": true,
        "width": "15",
        "collapse": true,
        "className": "group-integracion"
    },
    {
        "id": "75ebc3ea4eb4a464",
        "type": "ui_group",
        "name": "Mainfolder",
        "tab": "",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "a89316d6727375a0",
        "type": "ui_tab",
        "name": "DEV | URL Integraciones",
        "icon": "launch",
        "order": 2,
        "disabled": false,
        "hidden": false
    }
]

Hi!
Thanks a lot for you time and dedication to this.

Alright, trying to replicate your idea i cleaned up a node and button that i dont need now, so i can be more redeable.

In my efford to replicate the same "gap settings" to the other nodes i failed like a miss shot jejeje.

[
    {
        "id": "81bbeb2cd8e40f7b",
        "type": "ui_text",
        "z": "3d7e2cca152912c1",
        "group": "c006d20f2b9d8d7d",
        "order": 4,
        "width": 0,
        "height": 0,
        "name": "accion de la integracion",
        "label": "Accion de la integracion:  ",
        "format": "Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer.",
        "layout": "col-center",
        "className": "main-title-content",
        "x": 410,
        "y": 200,
        "wires": []
    },
    {
        "id": "e8d494691a3bfc03",
        "type": "ui_text",
        "z": "3d7e2cca152912c1",
        "group": "c006d20f2b9d8d7d",
        "order": 2,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Link a carpeta Gdrive",
        "format": "http://gdrive.com",
        "layout": "row-left",
        "className": "",
        "x": 400,
        "y": 240,
        "wires": []
    },
    {
        "id": "4994b790e83a56d7",
        "type": "ui_text",
        "z": "3d7e2cca152912c1",
        "group": "c006d20f2b9d8d7d",
        "order": 3,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Salida al servicio:",
        "format": "PUBLICO",
        "layout": "row-left",
        "className": "",
        "x": 390,
        "y": 280,
        "wires": []
    },
    {
        "id": "fc69c1adb05c7130",
        "type": "ui_text",
        "z": "3d7e2cca152912c1",
        "group": "c006d20f2b9d8d7d",
        "order": 1,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Numero de caso: ",
        "format": "1234567",
        "layout": "row-spread",
        "className": "",
        "x": 390,
        "y": 160,
        "wires": []
    },
    {
        "id": "01ec47468b358cf7",
        "type": "ui_text",
        "z": "3d7e2cca152912c1",
        "group": "806755722bad9b8b",
        "order": 4,
        "width": 0,
        "height": 0,
        "name": "accion de la integracion",
        "label": "Accion de la integracion:  ",
        "format": "Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer.",
        "layout": "col-center",
        "className": "main-title-content",
        "x": 670,
        "y": 200,
        "wires": []
    },
    {
        "id": "cb02b0626a7f52f7",
        "type": "ui_text",
        "z": "3d7e2cca152912c1",
        "group": "806755722bad9b8b",
        "order": 2,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Link a carpeta Gdrive",
        "format": "http://gdrive.com",
        "layout": "row-left",
        "className": "",
        "x": 660,
        "y": 240,
        "wires": []
    },
    {
        "id": "1bceaf6538dad3af",
        "type": "ui_text",
        "z": "3d7e2cca152912c1",
        "group": "806755722bad9b8b",
        "order": 3,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Salida al servicio:",
        "format": "PUBLICO",
        "layout": "row-left",
        "className": "",
        "x": 650,
        "y": 280,
        "wires": []
    },
    {
        "id": "96e2b78f3670e78c",
        "type": "ui_text",
        "z": "3d7e2cca152912c1",
        "group": "806755722bad9b8b",
        "order": 1,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Numero de caso: ",
        "format": "1234567",
        "layout": "row-spread",
        "className": "",
        "x": 650,
        "y": 160,
        "wires": []
    },
    {
        "id": "163acca4d647d2b3",
        "type": "ui_text",
        "z": "3d7e2cca152912c1",
        "group": "7602c61f815245de",
        "order": 2,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Link a carpeta Gdrive",
        "format": "http://gdrive.com",
        "layout": "row-left",
        "className": "",
        "x": 900,
        "y": 240,
        "wires": []
    },
    {
        "id": "6e82adced6d5ce06",
        "type": "ui_text",
        "z": "3d7e2cca152912c1",
        "group": "7602c61f815245de",
        "order": 4,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Salida al servicio:",
        "format": "PUBLICO",
        "layout": "row-left",
        "className": "",
        "x": 890,
        "y": 280,
        "wires": []
    },
    {
        "id": "63247f73748fb8b1",
        "type": "ui_text",
        "z": "3d7e2cca152912c1",
        "group": "7602c61f815245de",
        "order": 1,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Numero de caso: ",
        "format": "1234567",
        "layout": "row-spread",
        "className": "",
        "x": 890,
        "y": 160,
        "wires": []
    },
    {
        "id": "7fed6cdb4050754a",
        "type": "ui_text",
        "z": "3d7e2cca152912c1",
        "group": "7602c61f815245de",
        "order": 4,
        "width": 0,
        "height": 0,
        "name": "accion de la integracion",
        "label": "Accion de la integracion:  ",
        "format": "Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer.",
        "layout": "col-center",
        "className": "main-title-content",
        "x": 910,
        "y": 200,
        "wires": []
    },
    {
        "id": "e6c04068be74a044",
        "type": "ui_text",
        "z": "3d7e2cca152912c1",
        "group": "36f88242fa27bf78",
        "order": 6,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Accion de la integracion:  ",
        "format": "Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer.",
        "layout": "row-left",
        "className": "main-title-content no-gap",
        "x": 150,
        "y": 200,
        "wires": []
    },
    {
        "id": "8e558191773b7ad9",
        "type": "ui_text",
        "z": "3d7e2cca152912c1",
        "group": "36f88242fa27bf78",
        "order": 3,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "link a carpeta Gdrive",
        "format": "http://gdrive.com",
        "layout": "row-left",
        "className": "main-title-content no-gap",
        "x": 140,
        "y": 240,
        "wires": []
    },
    {
        "id": "d91e92c9f185d02f",
        "type": "ui_text",
        "z": "3d7e2cca152912c1",
        "group": "36f88242fa27bf78",
        "order": 4,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Salida al servicio:",
        "format": "PUBLICO",
        "layout": "row-left",
        "className": "main-title-content no-gap",
        "x": 130,
        "y": 280,
        "wires": []
    },
    {
        "id": "cbf31fd4257c2515",
        "type": "ui_text",
        "z": "3d7e2cca152912c1",
        "group": "36f88242fa27bf78",
        "order": 1,
        "width": "6",
        "height": 1,
        "name": "",
        "label": "Numero de caso: ",
        "format": "1234567",
        "layout": "row-left",
        "className": "main-title-content no-gap",
        "x": 130,
        "y": 160,
        "wires": []
    },
    {
        "id": "1e1ba5f421505dcb",
        "type": "ui_template",
        "z": "3d7e2cca152912c1",
        "group": "",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "format": "<style>\n    #Tab_DEV_\\7C_Integraciones{\n        height: unset !important;\n    }\n    \n    #DEV_\\7C_Integraciones{\n        height: initial !important;\n    }\n    \n    #DEV_\\7C_Integraciones[style]{\n        height: fit-content !important;\n    }\n    \n    .group-integracion{\n        height: initial !important;\n    }\n    \n    .group-integracion md-card.nr-dashboard-spacer{\n        align-items: flex-start !important;\n        position: relative !important;\n        top: 0px !important;\n        \n    }\n    \n    .main-title-content{\n        align-items: flex-start !important;\n        height: auto !important;\n        position: relative !important;\n    }\n    \n    .no-gap{\n        top: 0px !important;\n    }\n    \n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 100,
        "y": 100,
        "wires": [
            []
        ]
    },
    {
        "id": "c006d20f2b9d8d7d",
        "type": "ui_group",
        "name": "Integracion 2",
        "tab": "d92ab4b4.55f5c8",
        "order": 3,
        "disp": true,
        "width": "6",
        "collapse": true,
        "className": "group-integracion"
    },
    {
        "id": "806755722bad9b8b",
        "type": "ui_group",
        "name": "Integracion 3",
        "tab": "d92ab4b4.55f5c8",
        "order": 4,
        "disp": true,
        "width": "6",
        "collapse": true,
        "className": "group-integracion"
    },
    {
        "id": "7602c61f815245de",
        "type": "ui_group",
        "name": "integracion 4",
        "tab": "d92ab4b4.55f5c8",
        "order": 4,
        "disp": true,
        "width": "6",
        "collapse": true,
        "className": "group-integracion"
    },
    {
        "id": "36f88242fa27bf78",
        "type": "ui_group",
        "name": "Integracion 1",
        "tab": "d92ab4b4.55f5c8",
        "order": 2,
        "disp": true,
        "width": "6",
        "collapse": true,
        "className": "group-integracion"
    },
    {
        "id": "d92ab4b4.55f5c8",
        "type": "ui_tab",
        "name": "Integraciones",
        "icon": "launch",
        "order": 2,
        "disabled": false,
        "hidden": false
    }
]

Please use that nodes i've pasted now.

Thanks a lot!

[
    {
        "id": "5c42798006c66cf9",
        "type": "tab",
        "label": "ui text list",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "cc6931f7fb8c7d79",
        "type": "ui_template",
        "z": "5c42798006c66cf9",
        "group": "75ebc3ea4eb4a464",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "format": "<style>\n    #Tab_Integraciones{\n        height: unset !important;\n    }\n    \n\n    #Integraciones_Integracion_1, \n    #Integraciones_Integration_2, \n    #Integraciones_Integration_3, \n    #Integraciones_integracion_4 {\n        height: initial !important;\n    }\n    \n    \n    #Integraciones_Integracion_1_cards[style],\n    #Integraciones_Integracion_2_cards[style],\n    #Integraciones_Integracion_3_cards[style],\n    #Integraciones_Integracion_4_cards[style]\n    {\n        height: fit-content !important;\n    }\n    \n    \n    .group-integracion{\n        height: initial !important;\n    }\n    \n    .group-integracion md-card.nr-dashboard-spacer{\n        align-items: flex-start !important;\n        position: relative !important;\n        top: 0px !important;\n        \n    }\n    \n    .main-title-content{\n        align-items: flex-start !important;\n        height: auto !important;\n        position: relative !important;\n    }\n    \n    .no-gap{\n        top: 0px !important;\n    }\n    \n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 480,
        "y": 120,
        "wires": [
            []
        ]
    },
    {
        "id": "3dbe9d32c436b399",
        "type": "ui_text",
        "z": "5c42798006c66cf9",
        "group": "ef24eb1736360550",
        "order": 5,
        "width": 0,
        "height": 0,
        "name": "accion de la integracion",
        "label": "Accion de la integracion:  ",
        "format": "Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer.",
        "layout": "col-center",
        "className": "main-title-content no-gap",
        "x": 470,
        "y": 400,
        "wires": []
    },
    {
        "id": "03e3adf34cbb9b09",
        "type": "ui_text",
        "z": "5c42798006c66cf9",
        "group": "ef24eb1736360550",
        "order": 2,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Link a carpeta Gdrive",
        "format": "http://gdrive.com",
        "layout": "row-left",
        "className": "main-title-content no-gap",
        "x": 460,
        "y": 320,
        "wires": []
    },
    {
        "id": "b9d102b946a03e1e",
        "type": "ui_text",
        "z": "5c42798006c66cf9",
        "group": "ef24eb1736360550",
        "order": 3,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Salida al servicio:",
        "format": "PUBLICO",
        "layout": "row-left",
        "className": "main-title-content no-gap",
        "x": 450,
        "y": 360,
        "wires": []
    },
    {
        "id": "b954633a650aec7b",
        "type": "ui_text",
        "z": "5c42798006c66cf9",
        "group": "ef24eb1736360550",
        "order": 1,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Numero de caso: ",
        "format": "1234567",
        "layout": "row-left",
        "className": "main-title-content no-gap",
        "x": 450,
        "y": 280,
        "wires": []
    },
    {
        "id": "9a692ed446dd9dbb",
        "type": "ui_text",
        "z": "5c42798006c66cf9",
        "group": "34fccbc9b0bce08d",
        "order": 5,
        "width": 0,
        "height": 0,
        "name": "accion de la integracion",
        "label": "Accion de la integracion:  ",
        "format": "Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer.",
        "layout": "col-center",
        "className": "main-title-content no-gap",
        "x": 730,
        "y": 400,
        "wires": []
    },
    {
        "id": "1b77904bb91bf146",
        "type": "ui_text",
        "z": "5c42798006c66cf9",
        "group": "34fccbc9b0bce08d",
        "order": 2,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Link a carpeta Gdrive",
        "format": "http://gdrive.com",
        "layout": "row-left",
        "className": "main-title-content no-gap",
        "x": 720,
        "y": 320,
        "wires": []
    },
    {
        "id": "60bf1febb72e75b2",
        "type": "ui_text",
        "z": "5c42798006c66cf9",
        "group": "34fccbc9b0bce08d",
        "order": 3,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Salida al servicio:",
        "format": "PUBLICO",
        "layout": "row-left",
        "className": "main-title-content no-gap",
        "x": 710,
        "y": 360,
        "wires": []
    },
    {
        "id": "63122ae1f60fe340",
        "type": "ui_text",
        "z": "5c42798006c66cf9",
        "group": "34fccbc9b0bce08d",
        "order": 1,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Numero de caso: ",
        "format": "1234567",
        "layout": "row-left",
        "className": "main-title-content no-gap",
        "x": 710,
        "y": 280,
        "wires": []
    },
    {
        "id": "33c11e60e32b2470",
        "type": "ui_text",
        "z": "5c42798006c66cf9",
        "group": "a6c861f47fcceaf1",
        "order": 2,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Link a carpeta Gdrive",
        "format": "http://gdrive.com",
        "layout": "row-left",
        "className": "main-title-content no-gap",
        "x": 960,
        "y": 320,
        "wires": []
    },
    {
        "id": "625f29715f67a2b5",
        "type": "ui_text",
        "z": "5c42798006c66cf9",
        "group": "a6c861f47fcceaf1",
        "order": 3,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Salida al servicio:",
        "format": "PUBLICO",
        "layout": "row-left",
        "className": "main-title-content no-gap",
        "x": 950,
        "y": 360,
        "wires": []
    },
    {
        "id": "220ebf94b8b0b691",
        "type": "ui_text",
        "z": "5c42798006c66cf9",
        "group": "a6c861f47fcceaf1",
        "order": 1,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Numero de caso: ",
        "format": "1234567",
        "layout": "row-left",
        "className": "main-title-content no-gap",
        "x": 950,
        "y": 280,
        "wires": []
    },
    {
        "id": "153914a2c96637b7",
        "type": "ui_text",
        "z": "5c42798006c66cf9",
        "group": "a6c861f47fcceaf1",
        "order": 5,
        "width": 0,
        "height": 0,
        "name": "accion de la integracion",
        "label": "Accion de la integracion:  ",
        "format": "Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer.",
        "layout": "col-center",
        "className": "main-title-content no-gap",
        "x": 970,
        "y": 400,
        "wires": []
    },
    {
        "id": "69144e9f75a165e3",
        "type": "ui_text",
        "z": "5c42798006c66cf9",
        "group": "0adbef6a3e5d67d1",
        "order": 5,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Accion de la integracion:  ",
        "format": "Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer.",
        "layout": "col-center",
        "className": "main-title-content no-gap",
        "x": 210,
        "y": 400,
        "wires": []
    },
    {
        "id": "7bd10f7b871bfdef",
        "type": "ui_text",
        "z": "5c42798006c66cf9",
        "group": "0adbef6a3e5d67d1",
        "order": 2,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "link a carpeta Gdrive",
        "format": "http://gdrive.com",
        "layout": "row-left",
        "className": "main-title-content no-gap",
        "x": 200,
        "y": 320,
        "wires": []
    },
    {
        "id": "483637e5982f370d",
        "type": "ui_text",
        "z": "5c42798006c66cf9",
        "group": "0adbef6a3e5d67d1",
        "order": 3,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Salida al servicio:",
        "format": "PUBLICO",
        "layout": "row-left",
        "className": "main-title-content no-gap",
        "x": 190,
        "y": 360,
        "wires": []
    },
    {
        "id": "529471e595ab508f",
        "type": "ui_text",
        "z": "5c42798006c66cf9",
        "group": "0adbef6a3e5d67d1",
        "order": 1,
        "width": "6",
        "height": 1,
        "name": "",
        "label": "Numero de caso: ",
        "format": "1234567",
        "layout": "row-left",
        "className": "main-title-content no-gap",
        "x": 190,
        "y": 280,
        "wires": []
    },
    {
        "id": "f83d063021812bbe",
        "type": "ui_spacer",
        "z": "5c42798006c66cf9",
        "name": "spacer",
        "group": "a6fa0dc0e2e95533",
        "order": 5,
        "width": "1",
        "height": "1"
    },
    {
        "id": "f7424580221ade1a",
        "type": "ui_spacer",
        "z": "5c42798006c66cf9",
        "name": "spacer",
        "group": "0adbef6a3e5d67d1",
        "order": 4,
        "width": 1,
        "height": 1
    },
    {
        "id": "e58180ddc40b5724",
        "type": "ui_spacer",
        "z": "5c42798006c66cf9",
        "name": "spacer",
        "group": "ef24eb1736360550",
        "order": 4,
        "width": 1,
        "height": 1
    },
    {
        "id": "2a2f57c039fe2783",
        "type": "ui_spacer",
        "z": "5c42798006c66cf9",
        "name": "spacer",
        "group": "34fccbc9b0bce08d",
        "order": 4,
        "width": 1,
        "height": 1
    },
    {
        "id": "c4ee05282116e217",
        "type": "ui_spacer",
        "z": "5c42798006c66cf9",
        "name": "spacer",
        "group": "a6c861f47fcceaf1",
        "order": 4,
        "width": 1,
        "height": 1
    },
    {
        "id": "75ebc3ea4eb4a464",
        "type": "ui_group",
        "name": "Mainfolder",
        "tab": "",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "ef24eb1736360550",
        "type": "ui_group",
        "name": "Integracion 2",
        "tab": "40cee9400744ee4c",
        "order": 3,
        "disp": true,
        "width": "6",
        "collapse": true,
        "className": "group-integracion"
    },
    {
        "id": "34fccbc9b0bce08d",
        "type": "ui_group",
        "name": "Integracion 3",
        "tab": "40cee9400744ee4c",
        "order": 4,
        "disp": true,
        "width": "6",
        "collapse": true,
        "className": "group-integracion"
    },
    {
        "id": "a6c861f47fcceaf1",
        "type": "ui_group",
        "name": "integracion 4",
        "tab": "40cee9400744ee4c",
        "order": 4,
        "disp": true,
        "width": "6",
        "collapse": true,
        "className": "group-integracion"
    },
    {
        "id": "0adbef6a3e5d67d1",
        "type": "ui_group",
        "name": "Integracion 1",
        "tab": "40cee9400744ee4c",
        "order": 2,
        "disp": true,
        "width": "6",
        "collapse": true,
        "className": "group-integracion"
    },
    {
        "id": "a6fa0dc0e2e95533",
        "type": "ui_group",
        "name": "Integracion pruebaa prueba pruebaa",
        "tab": "",
        "order": 2,
        "disp": true,
        "width": "15",
        "collapse": true,
        "className": "group-integracion"
    },
    {
        "id": "40cee9400744ee4c",
        "type": "ui_tab",
        "name": "Integraciones",
        "icon": "launch",
        "order": 2,
        "disabled": false,
        "hidden": false
    }
]

Thanks a lot! Great work there!.

What i do not understand is how to control somehow the diferent objects. I know that can be done with "class" but maybe i'm missing something.

Regards!

it's all about inspecting your dashboard-elements by the developer tools in your browser:

<md-content flex="" class="_md flex">
	<div ui-masonry="" ng-show="main.selectedTab.header" id="Tab_Integraciones" class="masonry-container" aria-hidden="false" style="min-height: 1392.94px;">
		<!---->
		<!---->
		<ui-card-panel node-id="0adbef6a3e5d67d1" ng-repeat="group in main.selectedTab.items" id="Integraciones_Integracion_1" ng-if="group.header &amp;&amp; group.header.config &amp;&amp; !group.header.config.hidden" class="visible" style="left: 164px; top: 6px;">
			<div layout="column" class="nr-dashboard-cardpanel group-integracion layout-column" ng-class="[group.header.config &amp;&amp; group.header.config.className]" node-classname="group-integracion">
				<!---->
				<p class="nr-dashboard-cardtitle" ng-style="{width:ctrl.width-12}" ng-if="group.header &amp;&amp; group.header.config.disp &amp;&amp; group.header[group.header.length-1]!='!'" style="width: 306px;">Integracion 1 <!---->
					<span ng-if="group.header.config.collapse" ng-model="collapsed" ng-click="collapseCard()" class="nr-dashboard-cardcarat ng-pristine ng-untouched ng-valid ng-not-empty" role="button" tabindex="0" aria-invalid="false">
						<i ng-class="{ 'fa fa-caret-down':collapsed, 'fa fa-caret-up':!collapsed }" class="fa fa-caret-up"/>
					</span>
					<!---->
				</p>
				<!---->
				<div class="nr-dashboard-cardcontainer" id="Integraciones_Integracion_1_cards" ng-transclude="" ng-style="{width:ctrl.width, height:ctrl.height}" style="width: 318px; height: 264px;">
					<!---->
					<!---->
					<md-card ui-card-size="6x1" layout="row" layout-align="start center" class="nr-dashboard-text _md layout-row layout-align-start-center nr-dashboard-widget-Numero_de_caso__ main-title-content no-gap visible" ng-class="[ me.item.safeLabel, {'nr-dashboard-disabled':me.item.disabled}, me.item.className]" node-id="529471e595ab508f" style="left: 0px; top: 0px; width: 318px; height: 48px;">
						<p class="label" ng-bind-html="me.item.getLabel()">Numero de caso: </p>
						<p class="value" ng-bind-html="me.item.getText()">1234567</p>
					</md-card>
					<!---->
					<!---->
					<md-card ui-card-size="6x1" layout="row" layout-align="start center" class="nr-dashboard-text _md layout-row layout-align-start-center nr-dashboard-widget-link_a_carpeta_Gdrive main-title-content no-gap visible" ng-class="[ me.item.safeLabel, {'nr-dashboard-disabled':me.item.disabled}, me.item.className]" node-id="7bd10f7b871bfdef" style="left: 0px; top: 54px; width: 318px; height: 48px;">
						<p class="label" ng-bind-html="me.item.getLabel()">link a carpeta Gdrive</p>
						<p class="value" ng-bind-html="me.item.getText()">http://gdrive.com</p>
					</md-card>
					<!---->
					<!---->
					<md-card ui-card-size="6x1" layout="row" layout-align="start center" class="nr-dashboard-text _md layout-row layout-align-start-center nr-dashboard-widget-Salida_al_servicio_ main-title-content no-gap visible" ng-class="[ me.item.safeLabel, {'nr-dashboard-disabled':me.item.disabled}, me.item.className]" node-id="483637e5982f370d" style="left: 0px; top: 108px; width: 318px; height: 48px;">
						<p class="label" ng-bind-html="me.item.getLabel()">Salida al servicio:</p>
						<p class="value" ng-bind-html="me.item.getText()">PUBLICO</p>
					</md-card>
					<!---->
					<!---->
					<md-card ui-card-size="1x1" layout="" layout-align="" class="nr-dashboard-spacer _md layout-row layout-align-start-stretch visible" ng-class="{'nr-dashboard-disabled':me.item.disabled}" style="left: 0px; top: 162px; width: 48px; height: 48px;"> </md-card>
					<!---->
					<!---->
					<md-card ui-card-size="6x1" layout="column" layout-align="center center" class="nr-dashboard-text _md layout-column layout-align-center-center nr-dashboard-widget-Accion_de_la_integracion___ main-title-content no-gap visible" ng-class="[ me.item.safeLabel, {'nr-dashboard-disabled':me.item.disabled}, me.item.className]" node-id="69144e9f75a165e3" style="left: 0px; top: 216px; width: 318px; height: 48px;">
						<p class="label" ng-bind-html="me.item.getLabel()">Accion de la integracion:  </p>
						<p class="value" ng-bind-html="me.item.getText()">Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer.</p>
					</md-card>
					<!---->
				</div>
			</div>
		</ui-card-panel>
		<!---->
		<!---->
		<!---->
		<ui-card-panel node-id="ef24eb1736360550" ng-repeat="group in main.selectedTab.items" id="Integraciones_Integracion_2" ng-if="group.header &amp;&amp; group.header.config &amp;&amp; !group.header.config.hidden" class="visible" style="left: 488px; top: 6px;">
			<div layout="column" class="nr-dashboard-cardpanel group-integracion layout-column" ng-class="[group.header.config &amp;&amp; group.header.config.className]" node-classname="group-integracion">
				<!---->
				<p class="nr-dashboard-cardtitle" ng-style="{width:ctrl.width-12}" ng-if="group.header &amp;&amp; group.header.config.disp &amp;&amp; group.header[group.header.length-1]!='!'" style="width: 306px;">Integracion 2 <!---->
					<span ng-if="group.header.config.collapse" ng-model="collapsed" ng-click="collapseCard()" class="nr-dashboard-cardcarat ng-pristine ng-untouched ng-valid ng-not-empty" role="button" tabindex="0" aria-invalid="false">
						<i ng-class="{ 'fa fa-caret-down':collapsed, 'fa fa-caret-up':!collapsed }" class="fa fa-caret-up"/>
					</span>
					<!---->
				</p>
				<!---->
				<div class="nr-dashboard-cardcontainer" id="Integraciones_Integracion_2_cards" ng-transclude="" ng-style="{width:ctrl.width, height:ctrl.height}" style="width: 318px; height: 264px;">
					<!---->
					<!---->
					<md-card ui-card-size="6x1" layout="row" layout-align="start center" class="nr-dashboard-text _md layout-row layout-align-start-center nr-dashboard-widget-Numero_de_caso__ main-title-content no-gap visible" ng-class="[ me.item.safeLabel, {'nr-dashboard-disabled':me.item.disabled}, me.item.className]" node-id="b954633a650aec7b" style="left: 0px; top: 0px; width: 318px; height: 48px;">
						<p class="label" ng-bind-html="me.item.getLabel()">Numero de caso: </p>
						<p class="value" ng-bind-html="me.item.getText()">1234567</p>
					</md-card>
					<!---->
					<!---->
					<md-card ui-card-size="6x1" layout="row" layout-align="start center" class="nr-dashboard-text _md layout-row layout-align-start-center nr-dashboard-widget-Link_a_carpeta_Gdrive main-title-content no-gap visible" ng-class="[ me.item.safeLabel, {'nr-dashboard-disabled':me.item.disabled}, me.item.className]" node-id="03e3adf34cbb9b09" style="left: 0px; top: 54px; width: 318px; height: 48px;">
						<p class="label" ng-bind-html="me.item.getLabel()">Link a carpeta Gdrive</p>
						<p class="value" ng-bind-html="me.item.getText()">http://gdrive.com</p>
					</md-card>
					<!---->
					<!---->
					<md-card ui-card-size="6x1" layout="row" layout-align="start center" class="nr-dashboard-text _md layout-row layout-align-start-center nr-dashboard-widget-Salida_al_servicio_ main-title-content no-gap visible" ng-class="[ me.item.safeLabel, {'nr-dashboard-disabled':me.item.disabled}, me.item.className]" node-id="b9d102b946a03e1e" style="left: 0px; top: 108px; width: 318px; height: 48px;">
						<p class="label" ng-bind-html="me.item.getLabel()">Salida al servicio:</p>
						<p class="value" ng-bind-html="me.item.getText()">PUBLICO</p>
					</md-card>
					<!---->
					<!---->
					<md-card ui-card-size="1x1" layout="" layout-align="" class="nr-dashboard-spacer _md layout-row layout-align-start-stretch visible" ng-class="{'nr-dashboard-disabled':me.item.disabled}" style="left: 0px; top: 162px; width: 48px; height: 48px;"> </md-card>
					<!---->
					<!---->
					<md-card ui-card-size="6x1" layout="column" layout-align="center center" class="nr-dashboard-text _md layout-column layout-align-center-center nr-dashboard-widget-Accion_de_la_integracion___ main-title-content no-gap visible" ng-class="[ me.item.safeLabel, {'nr-dashboard-disabled':me.item.disabled}, me.item.className]" node-id="3dbe9d32c436b399" style="left: 0px; top: 216px; width: 318px; height: 48px;">
						<p class="label" ng-bind-html="me.item.getLabel()">Accion de la integracion:  </p>
						<p class="value" ng-bind-html="me.item.getText()">Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer.</p>
					</md-card>
					<!---->
				</div>
			</div>
		</ui-card-panel>
		<!---->
		<!---->
		<!---->
		<ui-card-panel node-id="34fccbc9b0bce08d" ng-repeat="group in main.selectedTab.items" id="Integraciones_Integracion_3" ng-if="group.header &amp;&amp; group.header.config &amp;&amp; !group.header.config.hidden" class="visible" style="left: 812px; top: 6px;">
			<div layout="column" class="nr-dashboard-cardpanel group-integracion layout-column" ng-class="[group.header.config &amp;&amp; group.header.config.className]" node-classname="group-integracion">
				<!---->
				<p class="nr-dashboard-cardtitle" ng-style="{width:ctrl.width-12}" ng-if="group.header &amp;&amp; group.header.config.disp &amp;&amp; group.header[group.header.length-1]!='!'" style="width: 306px;">Integracion 3 <!---->
					<span ng-if="group.header.config.collapse" ng-model="collapsed" ng-click="collapseCard()" class="nr-dashboard-cardcarat ng-pristine ng-untouched ng-valid ng-not-empty" role="button" tabindex="0" aria-invalid="false">
						<i ng-class="{ 'fa fa-caret-down':collapsed, 'fa fa-caret-up':!collapsed }" class="fa fa-caret-up"/>
					</span>
					<!---->
				</p>
				<!---->
				<div class="nr-dashboard-cardcontainer" id="Integraciones_Integracion_3_cards" ng-transclude="" ng-style="{width:ctrl.width, height:ctrl.height}" style="width: 318px; height: 264px;">
					<!---->
					<!---->
					<md-card ui-card-size="6x1" layout="row" layout-align="start center" class="nr-dashboard-text _md layout-row layout-align-start-center nr-dashboard-widget-Numero_de_caso__ main-title-content no-gap visible" ng-class="[ me.item.safeLabel, {'nr-dashboard-disabled':me.item.disabled}, me.item.className]" node-id="63122ae1f60fe340" style="left: 0px; top: 0px; width: 318px; height: 48px;">
						<p class="label" ng-bind-html="me.item.getLabel()">Numero de caso: </p>
						<p class="value" ng-bind-html="me.item.getText()">1234567</p>
					</md-card>
					<!---->
					<!---->
					<md-card ui-card-size="6x1" layout="row" layout-align="start center" class="nr-dashboard-text _md layout-row layout-align-start-center nr-dashboard-widget-Link_a_carpeta_Gdrive main-title-content no-gap visible" ng-class="[ me.item.safeLabel, {'nr-dashboard-disabled':me.item.disabled}, me.item.className]" node-id="1b77904bb91bf146" style="left: 0px; top: 54px; width: 318px; height: 48px;">
						<p class="label" ng-bind-html="me.item.getLabel()">Link a carpeta Gdrive</p>
						<p class="value" ng-bind-html="me.item.getText()">http://gdrive.com</p>
					</md-card>
					<!---->
					<!---->
					<md-card ui-card-size="6x1" layout="row" layout-align="start center" class="nr-dashboard-text _md layout-row layout-align-start-center nr-dashboard-widget-Salida_al_servicio_ main-title-content no-gap visible" ng-class="[ me.item.safeLabel, {'nr-dashboard-disabled':me.item.disabled}, me.item.className]" node-id="60bf1febb72e75b2" style="left: 0px; top: 108px; width: 318px; height: 48px;">
						<p class="label" ng-bind-html="me.item.getLabel()">Salida al servicio:</p>
						<p class="value" ng-bind-html="me.item.getText()">PUBLICO</p>
					</md-card>
					<!---->
					<!---->
					<md-card ui-card-size="1x1" layout="" layout-align="" class="nr-dashboard-spacer _md layout-row layout-align-start-stretch visible" ng-class="{'nr-dashboard-disabled':me.item.disabled}" style="left: 0px; top: 162px; width: 48px; height: 48px;"> </md-card>
					<!---->
					<!---->
					<md-card ui-card-size="6x1" layout="column" layout-align="center center" class="nr-dashboard-text _md layout-column layout-align-center-center nr-dashboard-widget-Accion_de_la_integracion___ main-title-content no-gap visible" ng-class="[ me.item.safeLabel, {'nr-dashboard-disabled':me.item.disabled}, me.item.className]" node-id="9a692ed446dd9dbb" style="left: 0px; top: 216px; width: 318px; height: 48px;">
						<p class="label" ng-bind-html="me.item.getLabel()">Accion de la integracion:  </p>
						<p class="value" ng-bind-html="me.item.getText()">Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer.</p>
					</md-card>
					<!---->
				</div>
			</div>
		</ui-card-panel>
		<!---->
		<!---->
		<!---->
		<ui-card-panel node-id="a6c861f47fcceaf1" ng-repeat="group in main.selectedTab.items" id="Integraciones_integracion_4" ng-if="group.header &amp;&amp; group.header.config &amp;&amp; !group.header.config.hidden" class="visible" style="left: 1136px; top: 6px;">
			<div layout="column" class="nr-dashboard-cardpanel group-integracion layout-column" ng-class="[group.header.config &amp;&amp; group.header.config.className]" node-classname="group-integracion">
				<!---->
				<p class="nr-dashboard-cardtitle" ng-style="{width:ctrl.width-12}" ng-if="group.header &amp;&amp; group.header.config.disp &amp;&amp; group.header[group.header.length-1]!='!'" style="width: 306px;">integracion 4 <!---->
					<span ng-if="group.header.config.collapse" ng-model="collapsed" ng-click="collapseCard()" class="nr-dashboard-cardcarat ng-pristine ng-untouched ng-valid ng-not-empty" role="button" tabindex="0" aria-invalid="false">
						<i ng-class="{ 'fa fa-caret-down':collapsed, 'fa fa-caret-up':!collapsed }" class="fa fa-caret-up"/>
					</span>
					<!---->
				</p>
				<!---->
				<div class="nr-dashboard-cardcontainer" id="Integraciones_integracion_4_cards" ng-transclude="" ng-style="{width:ctrl.width, height:ctrl.height}" style="width: 318px; height: 264px;">
					<!---->
					<!---->
					<md-card ui-card-size="6x1" layout="row" layout-align="start center" class="nr-dashboard-text _md layout-row layout-align-start-center nr-dashboard-widget-Numero_de_caso__ main-title-content no-gap visible" ng-class="[ me.item.safeLabel, {'nr-dashboard-disabled':me.item.disabled}, me.item.className]" node-id="220ebf94b8b0b691" style="left: 0px; top: 0px; width: 318px; height: 48px;">
						<p class="label" ng-bind-html="me.item.getLabel()">Numero de caso: </p>
						<p class="value" ng-bind-html="me.item.getText()">1234567</p>
					</md-card>
					<!---->
					<!---->
					<md-card ui-card-size="6x1" layout="row" layout-align="start center" class="nr-dashboard-text _md layout-row layout-align-start-center nr-dashboard-widget-Link_a_carpeta_Gdrive main-title-content no-gap visible" ng-class="[ me.item.safeLabel, {'nr-dashboard-disabled':me.item.disabled}, me.item.className]" node-id="33c11e60e32b2470" style="left: 0px; top: 54px; width: 318px; height: 48px;">
						<p class="label" ng-bind-html="me.item.getLabel()">Link a carpeta Gdrive</p>
						<p class="value" ng-bind-html="me.item.getText()">http://gdrive.com</p>
					</md-card>
					<!---->
					<!---->
					<md-card ui-card-size="6x1" layout="row" layout-align="start center" class="nr-dashboard-text _md layout-row layout-align-start-center nr-dashboard-widget-Salida_al_servicio_ main-title-content no-gap visible" ng-class="[ me.item.safeLabel, {'nr-dashboard-disabled':me.item.disabled}, me.item.className]" node-id="625f29715f67a2b5" style="left: 0px; top: 108px; width: 318px; height: 48px;">
						<p class="label" ng-bind-html="me.item.getLabel()">Salida al servicio:</p>
						<p class="value" ng-bind-html="me.item.getText()">PUBLICO</p>
					</md-card>
					<!---->
					<!---->
					<md-card ui-card-size="1x1" layout="" layout-align="" class="nr-dashboard-spacer _md layout-row layout-align-start-stretch visible" ng-class="{'nr-dashboard-disabled':me.item.disabled}" style="left: 0px; top: 162px; width: 48px; height: 48px;"> </md-card>
					<!---->
					<!---->
					<md-card ui-card-size="6x1" layout="column" layout-align="center center" class="nr-dashboard-text _md layout-column layout-align-center-center nr-dashboard-widget-Accion_de_la_integracion___ main-title-content no-gap visible" ng-class="[ me.item.safeLabel, {'nr-dashboard-disabled':me.item.disabled}, me.item.className]" node-id="153914a2c96637b7" style="left: 0px; top: 216px; width: 318px; height: 48px;">
						<p class="label" ng-bind-html="me.item.getLabel()">Accion de la integracion:  </p>
						<p class="value" ng-bind-html="me.item.getText()">Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer. Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters, between two or more users of mobile devices, desktops/laptops, or another type of compatible computer.</p>
					</md-card>
					<!---->
				</div>
			</div>
		</ui-card-panel>
		<!---->
		<!---->
	</div>
	<div class="node-red-ui--inline-link ng-hide" ng-show="!main.selectedTab.header" aria-hidden="true">
		<iframe class="iframe" allowfullscreen=""/>
		<!-- <div>The url {{ }} cannot be loaded into an iframe.</div> -->
	</div>
</md-content>

There you may specify their styles, the structure, if the elements have an id and which element get's the classes you add in the dashboard or nodes configuration:


classes2

...then you have to try out different style settings in your browser development tools.
When you are confident about everything then add the new style-settings to your template node. For this you may use the classes or element-ids or both.

Just great! I get it now...

Just last question....is there any way to set the text more "redable"?.
I mean, if i put this text for example:

**Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters.

Between two or more users of mobile devices, desktops/laptops, or another type of compatible computer.**

I want to format in a more good looking way, not all toghter and not understandable.

Thanks a lot again!

I've added a new css class

accion

and your text may include html tags. Perhaps this could be a way

[
    {
        "id": "cc6931f7fb8c7d79",
        "type": "ui_template",
        "z": "5c42798006c66cf9",
        "group": "75ebc3ea4eb4a464",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "format": "<style>\n    #Tab_Integraciones{\n        height: unset !important;\n    }\n    \n\n    #Integraciones_Integracion_1, \n    #Integraciones_Integration_2, \n    #Integraciones_Integration_3, \n    #Integraciones_integracion_4{\n        height: initial !important;\n    }\n    \n    \n    #Integraciones_Integracion_1_cards[style],\n    #Integraciones_Integracion_2_cards[style],\n    #Integraciones_Integracion_3_cards[style],\n    #Integraciones_Integracion_4_cards[style]{\n        height: fit-content !important;\n    }\n    \n    \n    .group-integracion{\n        height: initial !important;\n    }\n    \n    .group-integracion md-card.nr-dashboard-spacer{\n        align-items: flex-start !important;\n        position: relative !important;\n        top: 0px !important;\n        \n    }\n    \n    .main-title-content{\n        align-items: flex-start !important;\n        height: auto !important;\n        position: relative !important;\n    }\n    \n    .no-gap{\n        top: 0px !important;\n    }\n    \n    .accion p.value{\n        white-space: pre-wrap; \n        font-weight: lighter;\n    }\n    \n</style>\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 480,
        "y": 120,
        "wires": [
            []
        ]
    },
    {
        "id": "75ebc3ea4eb4a464",
        "type": "ui_group",
        "name": "Mainfolder",
        "tab": "",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false
    }
]

Hmmm ok..i need to find out how to work with tags over HTML jjejeje..

Great aproach!

Thanks a lot!.

Now, this is a silly question.

How can i do to apply the same tab format/style to all newcoming tabs?. The thing is that this is going to be used by people that i don't want to make any trouble or issue while writing some documentacion. So, in the following picture you can see that the tabs are referenced in order to apply the format i need and when you collapse the tabs all get re-arranged automatically.

Is there any way to use the same auto-order to all upcoming tabs without "declared" them one by one?.

Thanks a lot in advance!