Styling of the dashboard text input node question

[hotNipi]

I think you struggle now hard because any change of label width just doesn't apply.
And it shouldn't

The magic of the layout comes from here:

.input-container{
        display: flex;
        gap: 1em;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

The container is flex box and that adjusts all the sizes and placement of elements inside.
I can't really advise anything cos it will be blind development. Make an image and describe what needs to be adjusted and how much.

[Mikee1234K]

Ok so not that easy. Originally I tried HW Target temp, but that was over 3 lines, then Target temp which is over 2 lines. There should be enough space, but.. looking at it in inspect in Chrome, the box with the input takes up that space I think. I guess thats why its hard to adjust

[hotNipi]

What kind of values you expect will be typed in? How much space they should take? Not long according to your picture? So can leave most of the free space to the label?

<style>
    /*the container class defined as additional class for ui_template*/
    .input-container{
        display: flex;
        gap: 1em;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    /* a paragraph which is direct child of the input-container*/
    .input-container > p {
        color:red !important;
        user-select:none;
        width:100%;
    }
    /* an input element which is direct child of the input-container*/
    .input-container > input{
        background-color: transparent;
        border: unset;
        border-bottom: 1px solid #00a9ff;
        outline: unset;
        color: #e2ff00;
        text-align: end;
        width:3em;
    }
    
</style>

The label takes 100% of available area, which is driven by :
the input element - 3em; (you may give any pixel value for that)
and there is a gap between label nad input - 1em

[Mikee1234K]

Yes maximum input is 4 spaces wide, so for example 23.4

[Mikee1234K]

I copied your style into mine. Its not working.

<style>
    /*the container class defined as additional class for ui_template*/
    .input-container{
        display: flex;
        gap: 1em;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    /* a paragraph which is direct child of the input-container*/
    .input-container > p {
        color:deepskyblue !important;
        user-select:none;
        width:100%;
    }
    /* an input element which is direct child of the input-container*/
    .input-container > input{
        background-color: transparent;
        border: unset;
        border-bottom: 1px solid #00a9ff;
        outline: unset;
        color: #e2ff00;
        text-align: end;
        width:3em;
    }
    
</style>

<p class='input-label'>HW Target temp</p>
<input type="text" ng-model="inputChange" ng-keypress="$event.keyCode === 13 && sendInput()"></input>

<script>
    (function(scope) { 
        //define a variable to hold and share the content of the input field
        //so it can be used in any function in scope
        let inputData = ''
// function to be called on keyboard "Enter"
scope.sendInput = function() {
//if the data is empty string, dont send anything
if(inputData == ''){
return
}
if(inputData < 17.2){
return
}
if(inputData > 63){
return
}
//console.log('sending: ',data)
// send last know inputData to the server
scope.send({payload: inputData, topic: "input-changed"})
}

scope.$watch('inputChange', function(data) {
if (data) {
//console.log('inputChange: ',data)
// every time something is typed, store the data so it can be used whenever needed
inputData = data;
   }
});
})(scope);
</script>

[hotNipi]

@Mikee1234K

<p class='input-label'>HW Target temp</p>

You have class defined for the label. Maybe you have somewhere some CSS so the override happen?
You tried first with it like this. And as I don't know where you placed that declaration, it may freely affect.

 .input-label{
        width: 100px
    }

Just delete the css and you don't need class for that paragraph also.

[Mikee1234K]

I found it. I had something in a template, after deleting it looks ok now

Thanks !

[hotNipi]

it just misses perfect alignment with other widgets.

But it's easy

[Mikee1234K]

Now its even better ! Perfectly aligned.

[Mikee1234K]

Now you have started me... I have something else which needs moving 2px left... its the md-card. If I play with the yellow circled left, if I set that to -2px its perfectly aligned. I have no css for that where I could sneak that in, so I tried adding it to my style template for that widget

.md-card element.style{
        left:-2px;
        top: 196px;
        width: 289px;
        height: 44px;
        }

it did not work.

Only if you are in the mood, if not, just ignore me, I dont mind

[hotNipi]

My advise will be simple. Don't ever mess with those. You can decorate everything what is inside the card and the overall look of the card but never the position and size.

That's it.

I have long explanation also if you really need but trust me, I'm an expert.

[Mikee1234K]

You know what you're talking about, I dont. So I trust you, and wont touch it. Its hardly noticeable so I can live with it !

[hotNipi]

If you show a screenshot of whole dashboard I can clearly say what is wrong and how to fix but even with this fragment seems to me that you are using groups with different widths. (different amount of units in x-direction defined for groups).

The logic what figures out where to put the cards (groups) tries to do it's best but eventually fails at some point.

It is meant to have different sizes only in one axis. The other axis should have same size. This way it works without issues. It also can figure out places for cards when difference in sizes is multiplier of 2.

It is common mistake to try design the dashboard. The layout is not under your control so you can't do it. Do design the cards and let the layout do its thing with full respect of above.

[Mikee1234K]

Here is a screenshot. Its under AC, the AC Lounge Power and AC Study Power. I also attach the template I have for this tab, and the one for all (added to site head

This is the template for this widget

[{"id":"ab98427.85cd3c","type":"ui_template","z":"e32b69aa25b6467b","group":"de5979b5bacc0a7b","name":"dashboard styles dropdown","order":2,"width":0,"height":0,"format":"<style id=\"dashboard-styles-override\">\n    .nr-dashboard-theme md-select-menu md-option {\n        background-color: var(--nr-dashboard-groupBorderColor);\n        color: #eeeeee;\n        height: 29px;\n        /* border-radius: 14px;*/\n        margin-left: 10px;\n        margin-right: 10px;\n        margin-top: 2px;\n        box-shadow: 0 0 6px 6px #24202133;\n        transition: 0.3s;\n    }\n        .nr-dashboard-textinput md-input-container .md-input {\n        color: yellow\n    }\n\n    .nr-dashboard-theme md-select-menu md-option[selected] {\n        color: var(--color-blue-3) !important;\n        background-color: var(--color-mikered) !important;\n    }\n\n    .nr-dashboard-theme md-select-menu md-option:nth-child(even) {\n        background-color: var(--nr-dashboard-groupBorderColor);\n        opacity: 0.8;\n    }\n\n    .nr-dashboard-theme md-select-menu md-option:last-child {\n        margin-bottom: 8px;\n    }\n\n    .nr-dashboard-theme md-select-menu md-option:hover {\n        background-color: var(--nr-dashboard-widgetBackgroundColor) !important;\n        padding-left: 24px;\n    }\n\n    .nr-dashboard-theme md-select-menu md-option>.md-ripple-container {\n        /* border-radius: 14px;*/\n    }\n\n    .nr-dashboard-theme md-select .md-select-placeholder {\n        color: slateblue !important;\n        background-color: var(--color-yellow) !important;\n    }\n    \n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":1080,"y":20,"wires":[[]]},{"id":"de5979b5bacc0a7b","type":"ui_group","name":"AC","tab":"16fb611dcb2daec3","order":4,"disp":true,"width":6,"collapse":false,"className":""},{"id":"16fb611dcb2daec3","type":"ui_tab","name":"HVAC","icon":"mi-thermostat","order":2,"disabled":false,"hidden":false}]

And this is added to the head

[{"id":"cb0517a701f24be0","type":"ui_template","z":"a58af580a096077f","group":"03e24e9d989f1aa2","name":"","order":8,"width":0,"height":0,"format":"<style>\n    :root {\n        --color-green-primary: rgb(51, 204, 51);\n        --color-green-secondary: rgb(26, 101, 26);\n        --color-red-primary: rgb(255, 0, 0);\n        --color-mikered: rgb(75, 0, 100);\n        --color-red-secondary: rgba(153, 0, 0, 1);\n        --color-lightred-primary: rgb(100, 0, 0);\n        --color-lightred-secondary: rgb(200, 0, 0);\n        --color-blue-primary: rgb(0, 0, 255);\n        --color-blue-2: #eeeeee;\n        --color-blue-3: rgb(0, 0, 150);\n        --color-blue-secondary: rgb(0, 0, 200);\n        --color-lightblue-primary: rgb(255, 0, 0);\n        --color-lightblue-secondary: rgb(0, 255, 0);\n        --color-gray-primary: rgba(40, 40, 40, 1);\n        --color-gray-secondary: rgba(65, 65, 65, 1);\n        --color-text-primary: rgb(225, 225, 0);\n        --color-widget-border: rgb(0, 0, 255);\n    }\n\n        .nr-dashboard-textinput md-input-container .md-input {\n        color: yellow\n    }\n\n    md-select,\n    .md-select-placeholder,\n    .md-select-trigger {\n        color: red !important;\n    }\n\n    .nr-dashboard-gauge-title.nr-dashboard-gauge-titlel {\n        color: var(--color-text-primary);\n    }\n\n    .nr-dashboard-theme .nr-dashboard-chart-titlel {\n        color: var(--color-text-primary);\n    }\n\n\n    .nr-dashboard-theme .nr-dashboard-switch md-switch.md-checked .md-thumb {\n        background-color: #fbfa0b;\n    }\n\n    .nr-dashboard-theme .nr-dashboard-switch md-switch.md-checked .md-bar {\n        background-color: #6F6F6F80;\n    }\n\n\n    .nr-dashboard-theme .nr-dashboard-slider .md-track-fill {\n        background-color: #fbfa0b;\n    }\n\n    .nr-dashboard-theme .nr-dashboard-slider .md-thumb:after {\n        background-color: #fbfa0b;\n        border-color: #fbfa0b;\n\n    }\n\n    /*\n.nr-dashboard-theme .nr-dashboard-gauge-text {\ncolor:var(--color-text-primary);\n}\n*/\n\n    .red-slider * .md-thumb:after {\n        background-color: Red !important;\n        border-color: Red !important;\n\n    }\n\n    /*\n.red-slider * .md-focus-ring {\nbackground-color: Red !important;\nborder-color: Red !important;\n\n}\n*/\n\n    .red-slider * .md-track-fill {\n        background-color: Red !important;\n\n    }\n\n    .blue-slider * .md-thumb:after {\n        background-color: Blue !important;\n        border-color: Blue !important;\n\n    }\n\n    .blue-slider * .md-track-fill {\n        background-color: Blue !important;\n\n\n    }\n\n    .green-slider * .md-thumb:after {\n        background-color: Green !important;\n        border-color: Green !important;\n\n    }\n\n    .green-slider * .md-track-fill {\n        background-color: Green !important;\n\n    }\n\n    .white-slider * .md-thumb:after {\n        background-color: white !important;\n        border-color: white !important;\n\n    }\n\n\n    .white-slider * .md-track-fill {\n        background-color: white !important;\n\n    }\n\n\n    .big-thumb * .md-thumb {\n        transform: scale(.9) !important;\n    }\n\n    /* state ON */\n    .red-on-off md-switch.md-checked .md-thumb {\n        background-color: firebrick !important;\n    }\n\n    /* state OFF */\n    .red-on-off md-switch .md-thumb {\n        background-color: grey !important;\n    }\n\n    /* state ON */\n    .blue-on-off md-switch.md-checked .md-thumb {\n        background-color: blue !important;\n    }\n\n    /* state OFF */\n    .blue-on-off md-switch .md-thumb {\n        background-color: grey !important;\n    }\n\n    /* state ON */\n    .green-on-off md-switch.md-checked .md-thumb {\n        background-color: lime !important;\n    }\n\n    /* state OFF */\n    .green-on-off md-switch .md-thumb {\n        background-color: firebrick !important;\n    }\n\n    .red-button nr-dashboard-button md-button {\n        background-color: red !important;\n        color: white;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":520,"y":40,"wires":[[]]},{"id":"03e24e9d989f1aa2","type":"ui_group","name":"Energy Gauges","tab":"0656927ef6bc9b92","order":1,"disp":false,"width":"5","collapse":false,"className":""},{"id":"0656927ef6bc9b92","type":"ui_tab","name":"Energy","icon":"mi-electric_bolt","order":1,"disabled":false,"hidden":false}]

[hotNipi]

Everything what I see in your dashboard and mine test is the the dropdown label is a bit too left. Your CSS does not affect anything about position.

The dropdown can be fixed with

.nr-dashboard-dropdown md-input-container {
    padding-left: 12px;
}

[Mikee1234K]

I think I am pretty much finished with my dashboard. Happy with functionality and looks. I really like Node Red, its very powerful. But its not easy to master. I think it took me about a month from start to finish, with basically no Node Red experience when I started.
I think I have the basics now. Would not have been possible without the forums help, so many thanks to all the helpers !
@hotNipi I also enjoyed your challenges, even though I failed. But it taught me quite a bit too !