Apply styles to individual ui nodes (dashboard 2)

[Paul-Reed]

In a template node I have the following css;

.nrdb-ui-notification .v-snackbar__wrapper {
background-color: red;
border-left: 0px
}

...which adds a background colour to a notification node, and works.

However, I have a number of notification nodes, and I only want to apply the style only to one of them, so tried;

.confirm-action .nrdb-ui-notification .v-snackbar__wrapper {
background-color: red;
border-left: 0px
}

and added confirm-action to the </>class field in the notification node, however it does not apply the style.
I'm obviously approaching this incorrectly

[marcus-j-davies]

Hi @Paul-Reed

Try it in reverse.
Each css class in your selector, is applied in ancestry order.

Its possible:

.v-snackbar__wrapper is a descendant of .nrdb-ui-notification
BUT both not a descendant of .confirm-action

You could just try .confirm-action on its own.
I don't do dashboard-ing much at all, so apologies, if this isn't the cause

it may even be at the same level the targeted classes sit

.nrdb-ui-notification .v-snackbar__wrapper.confirm-action 

[jbudd]

It seems that the class confirm-action is not applied, at least I can't find any sign of it.
Which explains why styling it is ineffective.

Seems to be a 'non-positive undocumented feature' in the notification node.

[Paul-Reed]

@marcus-j-davies

You could just try .confirm-action on its own.

Already tried that, and also .nrdb-ui-notification .v-snackbar__wrapper .confirm-action and neither work.

[marcus-j-davies]

What if you use only the class you specify
And adjust the importance of the rule?

.confirm-action  {
  background-color: red !important;
  border-left: 0px !important;
}

Failing that, I’m not sure (I still use DB1)
So I’ll leave it to more experienced staff

[Paul-Reed]

@marcus-j-davies

What if you use only the class you specify
And adjust the importance of the rule?

Thanks for suggestions Marcus, but no, makes no difference.

[Colin]

@jbudd

It seems that the class confirm-action is not applied, at least I can't find any sign of it.

I think you are right. Inspecting the notification in the developer tools, I can see no sign of the the class. I suggest filing an issue.

[jbudd]

I'm not doing that, sorry.

[Paul-Reed]

@jbudd

It seems that the class confirm-action is not applied,

If there is no clarity from the flowfuse team, I'll raise an issue tomorrow.

@Colin

I think you are right. Inspecting the notification in the developer tools, I can see no sign of the the class. I suggest filing an issue

As above, thanks both.

[Paul-Reed]

Another reason why I need to target a specific notification node, is that it also styles the PWA popups, which of course I don't want to happen.

[jbudd]

I played with the "Accept raw HTML" setting. This is the best I could come up with.
It ought to be possible to hide the left hand margin but I couldn't find a way.

[{"id":"3076f1e5dca755a0","type":"ui-notification","z":"2bb77cea1390576c","ui":"d45641ed6d39fea1","position":"center center","colorDefault":true,"color":"#000000","displayTime":"0","showCountdown":true,"outputs":1,"allowDismiss":true,"dismissText":"Close","allowConfirm":true,"confirmText":"Confirm","raw":true,"className":"","name":"","x":560,"y":180,"wires":[[]]},{"id":"ef3dd5e59aa26180","type":"inject","z":"2bb77cea1390576c","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":"10","topic":"","payload":"The sky is falling!","payloadType":"str","x":190,"y":180,"wires":[["95a98d0b35a72e6d"]]},{"id":"95a98d0b35a72e6d","type":"template","z":"2bb77cea1390576c","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<div style = \"background-color:red; height: 100px; width: 200px; margin-left:-10px; margin-right: -10px; margin-bottom: -60px; padding-top: 20px;\"> <h2>{{payload}}</h2> </div>","output":"str","x":380,"y":180,"wires":[["3076f1e5dca755a0"]]},{"id":"d45641ed6d39fea1","type":"ui-base","name":"base","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":false,"notificationDisplayTime":5,"showDisconnectNotification":false}]

[Paul-Reed]

Thanks @jbudd, getting closer!
However, I'll raise an issue as it maybe just a bug that could be quickly fixed (and maybe not )

Unable to use `</> class` in ui-notification widget