# UI Template content not showing up in head

**URL:** <https://discourse.nodered.org/t/ui-template-content-not-showing-up-in-head/50407>\
**Category:** Dashboard\
**Created:** [30 August 2021 18:30 UTC](https://discourse.nodered.org/t/ui-template-content-not-showing-up-in-head/50407 "2021-08-30T18:30:42Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![acoulson-epicor](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/acoulson-epicor/32/47232_2.png) [@acoulson-epicor](https://discourse.nodered.org/u/acoulson-epicor)\
**Post date:** [30 August 2021 18:30 UTC](https://discourse.nodered.org/t/ui-template-content-not-showing-up-in-head/50407/1 "2021-08-30T18:30:42Z")

</div>

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.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/5/c5b6a3f44591f8ab0ef4904454c67c1dd3d9827e.png)

node id no found anywhere in DOM..

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/5/d5c2302b9d432f9ca7ce3f2daf9a4f64b4574ce1.png)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [30 August 2021 19:04 UTC](https://discourse.nodered.org/t/ui-template-content-not-showing-up-in-head/50407/2 "2021-08-30T19:04:50Z")

</div>

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.  
[https://www.w3schools.com/cssref/css\_selectors.asp](https://www.w3schools.com/cssref/css_selectors.asp)

But also -

> [@acoulson-epicor](#):
>
> to override the default group layout

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](https://flows.nodered.org/node/node-red-contrib-uibuilder).

---

<div class="post-metadata">

**Author:** ![acoulson-epicor](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/acoulson-epicor/32/47232_2.png) [@acoulson-epicor](https://discourse.nodered.org/u/acoulson-epicor)\
**Post date:** [30 August 2021 21:45 UTC](https://discourse.nodered.org/t/ui-template-content-not-showing-up-in-head/50407/3 "2021-08-30T21:45:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [30 August 2021 22:21 UTC](https://discourse.nodered.org/t/ui-template-content-not-showing-up-in-head/50407/4 "2021-08-30T22:21:38Z")

</div>

> [@acoulson-epicor](#):
>
> it should still insert the style into the header

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

```auto
<style>
#API-Tester_Login {
    left:20px !important;
}
</style>

```

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

---

<div class="post-metadata">

**Author:** ![acoulson-epicor](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/acoulson-epicor/32/47232_2.png) [@acoulson-epicor](https://discourse.nodered.org/u/acoulson-epicor)\
**Post date:** [30 August 2021 23:13 UTC](https://discourse.nodered.org/t/ui-template-content-not-showing-up-in-head/50407/5 "2021-08-30T23:13:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [29 September 2021 23:13 UTC](https://discourse.nodered.org/t/ui-template-content-not-showing-up-in-head/50407/6 "2021-09-29T23:13:42Z")

</div>

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