Dashboard colour picker text mode

[scargill]

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...

Regards

Pete

[dceejay]

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

Disappearing Palette Manager after failed Aedes install

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…

[hotNipi]

@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.

[scargill]

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:

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

[scargill]

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

[hotNipi]

Strange.

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

[scargill]

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

[hotNipi]

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

[scargill]

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

[hotNipi]

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

[scargill]

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….

[hotNipi]

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 ....

[scargill]

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

<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>

[scargill]

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

[hotNipi]

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

[scargill]

Ernm this ?

[scargill]

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

Regards

Pete

[hotNipi]

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

-

Almost invisible

In css you should write #Bedrock_home_Default_cards

[scargill]

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..

[Paul-Reed]

@hotNipi

#Bedrock_home_Default_cards

Should that be;
#Bedrock_Home_Default_cards ?