I would like to have two template nodes to my dashboard. Each template has its own table with a background image defined in its table style. Everything is OK with one single node, but when I add the second node the background image of the first node replicates in the second template node. It looks like all style definitions are common to the dashboard templates. Is it possible? Is there a workaround or a strategy to keep isolated the style definitions of each template node?
Probably yes but it would be easier to help if you share how your template nodes are configured.
the styles are shared among all the elements of each tab, that is what I confirm
if not wrong, you need to have 2 ui templates on the same screen
Here is an example of what I was doing
[{"id":"68439cd3.24fee4","type":"ui_template","z":"d1d0fd84.e20ba","group":"7c0b5d16.d64b64","name":"template 1","order":0,"width":0,"height":0,"format":"<table class=\"steelBlueCols\">\n<thead>\n<tr>\n<th>head1</th>\n<th>head2</th>\n<th>head3</th>\n<th>head4</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>cell1_1</td>\n<td>cell2_1</td>\n<td>cell3_1</td>\n<td>cell4_1</td>\n</tr>\n<tr>\n<td>cell1_2</td>\n<td>cell2_2</td>\n<td>cell3_2</td>\n<td>cell4_2</td>\n</tr>\n<tr>\n<td>cell1_3</td>\n<td>cell2_3</td>\n<td>cell3_3</td>\n<td>cell4_3</td>\n</tr>\n<tr>\n<td>cell1_4</td>\n<td>cell2_4</td>\n<td>cell3_4</td>\n<td>cell4_4</td>\n</tr>\n</tbody>\n</table>\n\n\n<style>\n table.steelBlueCols {\n border: 4px solid #555555;\n background-color: #555555;\n width: 100%;\n text-align: center;\n border-collapse: collapse;\n}\ntable.steelBlueCols td, table.steelBlueCols th {\n border: 1px solid #555555;\n padding: 5px 10px;\n}\ntable.steelBlueCols tbody td {\n font-size: 12px;\n font-weight: bold;\n color: #FFFFFF;\n}\ntable.steelBlueCols td:nth-child(even) {\n background: #398AA4;\n}\ntable.steelBlueCols thead {\n background: #398AA4;\n border-bottom: 10px solid #398AA4;\n}\ntable.steelBlueCols thead th {\n font-size: 15px;\n font-weight: bold;\n color: #FFFFFF;\n text-align: left;\n border-left: 2px solid #398AA4;\n}\ntable.steelBlueCols thead th:first-child {\n border-left: none;\n}\n\ntable.steelBlueCols tfoot td {\n font-size: 13px;\n}\ntable.steelBlueCols tfoot .links {\n text-align: right;\n}\ntable.steelBlueCols tfoot .links a{\n display: inline-block;\n background: #FFFFFF;\n color: #398AA4;\n padding: 2px 8px;\n border-radius: 5px;\n}\n</style>\n<!--//I think u looking for this style-->\n<style>\n #MyTab_template1 > div {\n width:49vw;\n height:49vh;\n }\n \n #MyTab_template1 > div > p[style] {\n width:49% !important;\n height:49vh !important;\n }\n \n #MyTab_template1_cards[style] {\n width:49% !important;\n height:49vh !important;\n }\n \n #MyTab_template1_cards > md-card[style] {\n width:49% !important;\n height:49vh !important;\n }\n\n \n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":370,"y":560,"wires":[["96ba676c.9bee18"]]},{"id":"96ba676c.9bee18","type":"ui_template","z":"d1d0fd84.e20ba","group":"b8eb0cbd.65616","name":"template 2","order":2,"width":"0","height":"0","format":"<table class=\"steelRedCols\">\n<thead>\n<tr>\n<th>head1</th>\n<th>head2</th>\n<th>head3</th>\n<th>head4</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>cell1_1</td>\n<td>cell2_1</td>\n<td>cell3_1</td>\n<td>cell4_1</td>\n</tr>\n<tr>\n<td>cell1_2</td>\n<td>cell2_2</td>\n<td>cell3_2</td>\n<td>cell4_2</td>\n</tr>\n<tr>\n<td>cell1_3</td>\n<td>cell2_3</td>\n<td>cell3_3</td>\n<td>cell4_3</td>\n</tr>\n<tr>\n<td>cell1_4</td>\n<td>cell2_4</td>\n<td>cell3_4</td>\n<td>cell4_4</td>\n</tr>\n</tbody>\n</table>\n\n\n<style>\n table.steelRedCols {\n border: 4px solid #555555;\n background-color: red;\n width: 100%;\n text-align: center;\n border-collapse: collapse;\n}\ntable.steelRedCols td, table.steelRedCols th {\n border: 1px solid #555555;\n padding: 5px 10px;\n}\ntable.steelRedCols tbody td {\n font-size: 12px;\n font-weight: bold;\n color: #FFFFFF;\n}\ntable.steelRedCols td:nth-child(even) {\n background: #398AA4;\n}\ntable.steelRedCols thead {\n background: #398AA4;\n border-bottom: 10px solid #398AA4;\n}\ntable.steelRedCols thead th {\n font-size: 15px;\n font-weight: bold;\n color: #FFFFFF;\n text-align: left;\n border-left: 2px solid #398AA4;\n}\ntable.steelRedCols thead th:first-child {\n border-left: none;\n}\n\ntable.steelRedCols tfoot td {\n font-size: 13px;\n}\ntable.steelRedCols tfoot .links {\n text-align: right;\n}\ntable.steelRedCols tfoot .links a{\n display: inline-block;\n background: #FFFFFF;\n color: orange;\n padding: 2px 8px;\n border-radius: 5px;\n}\n</style>\n\n\n<style>\n #MyTab_template2 > div {\n width:49vw;\n height:49vh;\n }\n \n #MyTab_template2 > div > p[style] {\n width:49% !important;\n height:49vh !important;\n }\n \n #MyTab_template2_cards[style] {\n width:49% !important;\n height:49vh !important;\n }\n \n #MyTab_template2_cards > md-card[style] {\n width:49% !important;\n height:49vh !important;\n }\n\n \n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":590,"y":560,"wires":[[]]},{"id":"7c0b5d16.d64b64","type":"ui_group","z":"","name":"template1","tab":"9f0d7ef4.aa604","disp":false,"width":"5","collapse":false},{"id":"b8eb0cbd.65616","type":"ui_group","z":"","name":"template2","tab":"9f0d7ef4.aa604","disp":false,"width":"6","collapse":false},{"id":"9f0d7ef4.aa604","type":"ui_tab","z":"","name":"MyTab","icon":"dashboard","disabled":false,"hidden":false}]
Hi Nxito,
thank you very much for your example flow that solved my problem. Yes, you can have multiple template provided that you differentiate the styles using different class names. Initially I assumed that the templates would be somehow individually sandboxed, but that's was not the case!
Hi Andrei, thank you for your help. As I explain in the following answer to Nxito i didn't differentiate the style classes and so all templates shared the same style of the first template! It wasn't apparent that the template nodes all share the same styles! Anyway problem solved.
1 Like
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
