UI Template content not showing up in head

I am attempting to inject some css to override the default group layout. I have the type set to "Added to site section", but the style clause is not present in my dashboard UI

Node Red version 1.0.6 and dashboard 2.24.1.


node id no found anywhere in DOM..

CSS selectors do work a bit differently. You cant chain class and id selectors that way. In CSS there is prioritized hierarchy and the ID precedes the class. That is what is completely wrong with the syntax.

But also -

You are stepping on the land of kind of restricted area. Group layout is not meant to be changed. Positional properties for groups are set by the dashboard layout logic with inline CSS rules and that has higher priority than id. So your changes don't apply that way anyhow.

The card layout system of dashboard (you like it or not) is something you'll need to respect. There is nothing to fight against. And if this becomes obstacle - you have to create the dashboard from scratch, using for example uibuilder.

Fair enough, but the main issue here is that the ui-template is not injecting its contents into the header. I presume it is not smart enough to parse the <style contents for correctness, so it should still insert the style into the header, but it does not.

Works for me. Target in your css styles the ui_card_panel with its id
in your case API-Tester_Login
and in your styles add !important after each property

#API-Tester_Login {
    left:20px !important;

ps . i agree with @hotNipi if you want full flexibility on the dashboard design .. go with Uibuilder.

Thanks, I did get it working by including it in a group that is displayed before the one I'm trying to move. But yeah, I agree...I need to look at uibuilder. I'm doing some rapid prototyping starting with a dashboard I used previously for a demo to management tomorrow, though, and don't have the luxury of time at the moment.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.