# Dashboard colour picker text mode

**URL:** <https://discourse.nodered.org/t/dashboard-colour-picker-text-mode/40823>\
**Category:** Dashboard\
**Created:** [11 February 2021 14:07 UTC](https://discourse.nodered.org/t/dashboard-colour-picker-text-mode/40823 "2021-02-11T14:07:49Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![scargill](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scargill/32/1118_2.png) [@scargill](https://discourse.nodered.org/u/scargill)\
**Post date:** [11 February 2021 14:07 UTC](https://discourse.nodered.org/t/dashboard-colour-picker-text-mode/40823/1 "2021-02-11T14:07:49Z")

</div>

![2021-02-11 14_37_58-Node-RED Dashboard](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/d/2d5ad0da6bb4b7fd46304fbdeba2f469a95e091a.png)

Can anyone help. I just had to go back a version or so of my NR due to an issue unrelated to Dsdhboard - I have everthing running and updated to the latest dashboardd -however I have an issue with formatting of the text mode input colour picker mode.

One of you guys kindly helped me last time to use a paintbrush in the colour picker icon

And that was great (sadly I didn;'t make notes) - but now as you see in the photo the formatting of that colour pickre rectanle + brush is all screwed - any idea how to fix?

Hotnipi - mightve been you? But I've faithfully restored my flow... but I'm getting the mess you see in the picture...

What it should look like is this...

 ![2021-02-11 15_10_00-My Node-Red Dashboard Controls for 2021 - Scargill's Tech Blog](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/3/631b779445170d3701c657789acb4d68f87effff.png)

Regards

Pete

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [11 February 2021 14:37 UTC](https://discourse.nodered.org/t/dashboard-colour-picker-text-mode/40823/2 "2021-02-11T14:37:32Z")

</div>

Pete - @hotnpi already replied in the other thread.. .maybe it crossed in the aether

> [@Disappearing Palette Manager after failed Aedes install](https://discourse.nodered.org/t/disappearing-palette-manager-after-failed-aedes-install/40746/18):
>
> Hi Peter, The old thread where it was discussed is here: I did by my own instructions and it worked quit well. \<style\> #Home\_CHART\_cards \> md-card \> md-input-container { padding:0 !important; margin:0 !important; border-radius:20px; background-color:var(--nr-dashboard-widgetColor); } #Home\_CHART\_cards \> md-card \> md-input-container \> label{ position: relative; top: 15px; } .nr-dashboard-theme .nr-dashboard-textinput input[type="color"]{ border: none !important; wi…

---

<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:** [11 February 2021 14:50 UTC](https://discourse.nodered.org/t/dashboard-colour-picker-text-mode/40823/3 "2021-02-11T14:50:16Z")

</div>

@scargill  
Things to check:

1. Is the `ui_template` node,where the styles are defined, targeted to be added to site head?
2. Check the spelling of the Tab names and Group names. The CSS rules contain those names and the #id selector must be valid to reach the target. `#Tab_name_Group_name_cards`. All are case sensitive.

---

<div class="post-metadata">

**Author:** ![scargill](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scargill/32/1118_2.png) [@scargill](https://discourse.nodered.org/u/scargill)\
**Post date:** [11 February 2021 15:42 UTC](https://discourse.nodered.org/t/dashboard-colour-picker-text-mode/40823/4 "2021-02-11T15:42:02Z")

</div>

Ok, you;ve immediately confused me, sorry. The flows I imported into the older Nofe-Red (only November) are pasted directly from the originals – not changed in any way – so whatever I originally set up in the flows is as before..

So yes on one of my pages is a ui template node with CSS that says:

![image001.png](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/1/617a9ce5316bb6f177108233de3c642550f8ee6f.png)

None of that has changed – all my flows seems to have imported intact (all were saved to a single file)

---

<div class="post-metadata">

**Author:** ![scargill](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scargill/32/1118_2.png) [@scargill](https://discourse.nodered.org/u/scargill)\
**Post date:** [11 February 2021 15:45 UTC](https://discourse.nodered.org/t/dashboard-colour-picker-text-mode/40823/5 "2021-02-11T15:45:15Z")

</div>

Thank you. He's responded but as yet nothing – I made no changes to my flow pages, just imported the lot as a block – and everything except for the colour picker text node formatting is fine – somehow that didn’t make it – I'm aassuming it is something in the setup – already checked site widget sizes and spacing – nothing wrong there that I can see…..

Regards

Pete

---

<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:** [11 February 2021 16:01 UTC](https://discourse.nodered.org/t/dashboard-colour-picker-text-mode/40823/6 "2021-02-11T16:01:51Z")

</div>

Strange.

Try to set the ui\_template with styles to render in group, then deploy, then set it back to site head and deploy.

---

<div class="post-metadata">

**Author:** ![scargill](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scargill/32/1118_2.png) [@scargill](https://discourse.nodered.org/u/scargill)\
**Post date:** [11 February 2021 16:59 UTC](https://discourse.nodered.org/t/dashboard-colour-picker-text-mode/40823/7 "2021-02-11T16:59:22Z")

</div>

Strange indeed. I set to group, deployed, checked, same (on phone with refresh) – went back to site, again checked on phone, no difference. I even changed the button radius to make sure I wasn't dreaming – the radius changed on the phone, changed it back, checked, all ok but that brush remains stuck out of place.

Anything else come to mind… reminder I did update Dashboard so it isn’t an old dashboard. The state of affairs of my original clone as around Oct/Nov 2020… at which time everything was up to date. I don’t need to update anything other than dashboard I assume?…

Pete

---

<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:** [11 February 2021 17:01 UTC](https://discourse.nodered.org/t/dashboard-colour-picker-text-mode/40823/8 "2021-02-11T17:01:47Z")

</div>

What is the dashboard version? And If you can, for sure do update..

---

<div class="post-metadata">

**Author:** ![scargill](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scargill/32/1118_2.png) [@scargill](https://discourse.nodered.org/u/scargill)\
**Post date:** [11 February 2021 18:02 UTC](https://discourse.nodered.org/t/dashboard-colour-picker-text-mode/40823/9 "2021-02-11T18:02:17Z")

</div>

Hi

NR 1.2.6 and NR Dashboard 2.27.0

Any ideas for getting around this welcome – it was all working so well..

Regards

Pete

---

<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:** [11 February 2021 18:14 UTC](https://discourse.nodered.org/t/dashboard-colour-picker-text-mode/40823/10 "2021-02-11T18:14:03Z")

</div>

So things are up to date.

It will be quite of challenge but as I'm out of ideas, it takes to see things.  
If you can, explore the picker with browser developer tool and trill down to see same elements as below

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

---

<div class="post-metadata">

**Author:** ![scargill](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scargill/32/1118_2.png) [@scargill](https://discourse.nodered.org/u/scargill)\
**Post date:** [11 February 2021 18:43 UTC](https://discourse.nodered.org/t/dashboard-colour-picker-text-mode/40823/11 "2021-02-11T18:43:47Z")

</div>

Thanks for your efforts – I just noticed of course, not only is the icon raised up to the left but the nice dark rounded frame around the picker has also disappeared… but that css section continues to round the buttons….

---

<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:** [11 February 2021 18:52 UTC](https://discourse.nodered.org/t/dashboard-colour-picker-text-mode/40823/12 "2021-02-11T18:52:57Z")

</div>

I saw that immediately and it means that `md-input-container` nor the `label` inside it have not reached with the styles in the `ui_template` But why, I can't say without seeing it. That may be tiny mistake somewhere.

Do you have styles for rounded buttons (at right side) in same `ui_template` ?

Actually share the content of that ui\_template for styles. Just to be sure if something ....

---

<div class="post-metadata">

**Author:** ![scargill](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scargill/32/1118_2.png) [@scargill](https://discourse.nodered.org/u/scargill)\
**Post date:** [11 February 2021 20:14 UTC](https://discourse.nodered.org/t/dashboard-colour-picker-text-mode/40823/13 "2021-02-11T20:14:22Z")

</div>

Bear in mind I've made no changes to the flows.. anyway here's the CSS template

```auto
<style>

.md-button {

border-radius: 16px;

}

#Bedrock-other_Default_cards > md-card > md-input-container {

padding:0 !important;

margin:0 !important;

border-radius:16px;

background-color:var(--nr-dashboard-widgetColor);

}

#Bedrock-other_Default_cards > md-card > md-input-container > label{

position: relative;

top: 15px;

}

#Bedrock-home_Default_cards > md-card > md-input-container {

padding:0 !important;

margin:0 !important;

border-radius:16px;

background-color:var(--nr-dashboard-widgetColor);

}

#Bedrock-home_Default_cards > md-card > md-input-container > label{

position: relative;

top: 15px;

}

.nr-dashboard-theme .nr-dashboard-textinput input[type="color"]{

border: none !important;

width: 58px;

height: 60px;

margin: 0 !important;

padding: 10% !important;

}

</style>

```

---

<div class="post-metadata">

**Author:** ![scargill](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scargill/32/1118_2.png) [@scargill](https://discourse.nodered.org/u/scargill)\
**Post date:** [11 February 2021 20:16 UTC](https://discourse.nodered.org/t/dashboard-colour-picker-text-mode/40823/14 "2021-02-11T20:16:08Z")

</div>

Sorry - that didn;t format right - looks way better in node-red..

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/0/10595864b95142f26ba2dc4b86f69fad42170c34.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:** [11 February 2021 20:35 UTC](https://discourse.nodered.org/t/dashboard-colour-picker-text-mode/40823/15 "2021-02-11T20:35:04Z")

</div>

CSS is fine.  
Can you do the screenshot from the developer tools from the color picker element selected?

---

<div class="post-metadata">

**Author:** ![scargill](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scargill/32/1118_2.png) [@scargill](https://discourse.nodered.org/u/scargill)\
**Post date:** [11 February 2021 22:39 UTC](https://discourse.nodered.org/t/dashboard-colour-picker-text-mode/40823/16 "2021-02-11T22:39:18Z")

</div>

Ernm this ?

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

---

<div class="post-metadata">

**Author:** ![scargill](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scargill/32/1118_2.png) [@scargill](https://discourse.nodered.org/u/scargill)\
**Post date:** [11 February 2021 22:44 UTC](https://discourse.nodered.org/t/dashboard-colour-picker-text-mode/40823/17 "2021-02-11T22:44:31Z")

</div>

I just came back to the computer – and sent a screenshot… I'm around over the weekend… any input most welcome.

Regards

Pete

---

<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:** [11 February 2021 23:45 UTC](https://discourse.nodered.org/t/dashboard-colour-picker-text-mode/40823/18 "2021-02-11T23:45:32Z")

</div>

Hah, I told there must be tiny mistake somewhere.  
So tiny

`-`

Almost invisible

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/6/26acf868b31ab975f67b1a7f6c5d089d1596f457.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/0/20af597c2e843f7b6a67bc237f63623f2b510874.png)

In css you should write `#Bedrock_home_Default_cards`

---

<div class="post-metadata">

**Author:** ![scargill](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scargill/32/1118_2.png) [@scargill](https://discourse.nodered.org/u/scargill)\
**Post date:** [12 February 2021 09:40 UTC](https://discourse.nodered.org/t/dashboard-colour-picker-text-mode/40823/19 "2021-02-12T09:40:03Z")

</div>

That raises 2 questions - it has worked all this time - I simply filed the flows and pulled them in from the file - why did it work before? and - I assume that also applies to the OTHER page.

So - as you indicated late last night, I changed all references to use the underscore instead of the dash. Redeployed as before - and THEN just to be sure, rbooted the Pi. Sadly, it made no difference at all - the buttons remain rounded - and I can alter the rounding in that node and see the result - but the icons remain as before, stuck up at the top ☹

Ok, here's a BIG problem - that FIRST line about the button DEFINITELY changes the rounding on the button - but as for the other lines - I just tried various permutations...

#Bedrock-home\_Default\_cards \> md-card \> md-input-container {  
padding:0 !important;  
margin:0 !important;  
border-radius:16px;  
background-color:var(--nr-dashboard-widgetColor);  
}  
#Bedrock\_home\_Default\_cards \> md-card \> md-input-container {  
padding:0 !important;  
margin:0 !important;  
border-radius:16px;  
background-color:var(--nr-dashboard-widgetColor);  
}  
#Bedrock-home\_Default\_cards \> md-card \> md-input-container {  
padding:16 !important;  
margin:16 !important;  
border-radius:16px;  
background-color:var(--nr-dashboard-widgetColor);  
}  
#Bedrock\_home\_Default\_cards \> md-card \> md-input-container {  
padding:16 !important;  
margin:16 !important;  
border-radius:16px;  
background-color:var(--nr-dashboard-widgetColor);  
}

The result on my dashboard home screen - no changes WHATSOEVER. It SEEMS the only sections that do anything are the top md-button and bottom textinput sections (if I remove the bottom section, the rectangular colour boxes widen out considerably). So, I thought my grasp of CSS was bad - it seems it is worse than I thought.

Help..

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [12 February 2021 09:45 UTC](https://discourse.nodered.org/t/dashboard-colour-picker-text-mode/40823/20 "2021-02-12T09:45:46Z")

</div>

> [@hotNipi](#):
>
> #Bedrock\_home\_Default\_cards

Should that be;  
#Bedrock\_Home\_Default\_cards ?

[Next page](https://discourse.nodered.org/t/dashboard-colour-picker-text-mode/40823.md?page=2)