I have noticed that column widths are not all the same on a page. See image below. The Group of 4 columns has wider columns than the Group having 2 columns. Does anyone have an answer as to why this is and is there a way to get round the issue?
Dashboard 2 v1.28
MS Edge
Default Theme
Widgets are ui-template nodes with a CSS width of 70px for button
Can you export and paste here one widget from each group please?
Also, check the open issues on the dashboard's GitHub page, I seem to remember something about ui-template's width.
The widgets are all the same
<template>
<v-card class = "card">
<v-btn class = "btnBasic" :class = "btnClass" stacked @click="changeState()">
{{btnLabel}}
<v-icon class = "iconBasic" :class = "iconClass" >{{iconImage}}</v-icon>
</v-btn>
</v-card>
</template>
<script>
export default {
data() {
return {
source: 'Dashboard',
systemData: {button: {applianceName: 'Kitchen Air Fryer',
systemAttributeID: 'OnOff'},
},
// Note that when btnState = 0 the button will always be shown as 'Off'
btnState: 0,
btnData: {class: ['btnOff', 'btnOn'],
label: ['SO']
},
iconData: {class: ['iconOff', 'iconOn'],
image: ['mdi-power-socket-uk']
},
outputValue: ['Off', 'On'],
}
},
methods: {
changeState: function () {
this.toggleState(this.btnState)
let topic = `${this.source}/${this.systemData.button.applianceName}/${this.systemData.button.systemAttributeID}`
this.send( {topic, payload: this.outputValue[this.btnState]} )
},
toggleState: function () {
this.btnState = (++this.btnState) % this.outputValue.length
},
validateOption: function(option) {
const optionMax = option.length - 1
let optionSelect = this.btnState
if (optionSelect > optionMax) {
optionSelect = optionMax
}
return option[optionSelect]
},
/** Update Widget property values if required
*
* Input ui-update
* label Array of string, length 1 or more. Only number of outputValues
* will be shown. Note: The first entry in the Array will match the first
* entry in 'output'
* output Array of output values (any), length 1 or more. Each 'click' of
* button will output next value in Array. Button label will also
* update for each 'click' if there is more than 1 element in btnData.label
* Array
* icon New mdi icon
*
*/
setDynamicUpdates(uiUpdates) {
for (const [property, value] of Object.entries(uiUpdates)) {
if (Array.isArray(value)) {
if (property === 'label') {
this.btnData.label = value
}
if (property === 'output') {
this.outputValue = value
}
}
if (property === 'icon') {
this.iconData.image = value
}
}
},
},
watch: {
msg: function () {
const [protocol, applianceName, deviceName, attribute, action = ''] = this.msg.topic.split('/')
const btnApplianceName = this.systemData.button.applianceName
if (btnApplianceName === applianceName) {
const payloadValue = this.msg.payload?.value
if (attribute === 'OnOff') {
// Only change btnState if msg.payload is valid (i.e. is found in outputValue)
if (this.outputValue.indexOf(payloadValue) !== -1) {
this.btnState = this.outputValue.indexOf(payloadValue)
}
}
}
},
},
computed: {
// Automatically compute these variables whenever VueJS deems appropriate
btnLabel: function() {
return this.validateOption(this.btnData.label)
},
btnClass: function() {
return this.validateOption(this.btnData.class)
},
iconClass: function() {
return this.validateOption(this.iconData.class)
},
iconImage: function() {
return this.validateOption(this.iconData.image)
},
},
mounted () {
this.$socket.on("msg-input:" + this.id, (msg) => {
/**
* Comply with Dashboard 2 schema to set dynamic values
*
* msg: ui-update: {<property>: value}
*
*/
if ( Object.hasOwn(msg, 'ui_update') ) {
this.setDynamicUpdates(msg.ui_update)
}
})
},
unmounted() {
// code here when the component is removed from the Dashboard
// i.e. when the user navigates away from the page
this.$socket.off(`msg-input:${this.id}`)
},
}
</script>
<style scoped>
</style>
CSS ui-template node
.card {
background-color: #4F4F4F; /* Very dark gray */
border: 1px solid black;
border-radius: 8px;
width: 75px !important;
height: 105px;
}
.btnBasic {
background-color: #4F4F4F; /* Very dark gray */
border-radius: 8px;
width: 70px !important;
height: 75px !important;
}
.btnOn {
color: rgb(189, 150, 8); /* Dark washed rose */
}
.btnOff {
color: darkgrey;
}
.iconBasic {
font-size: 45px;
height: 45px;
width: 45px;
}
.iconOn {
color: rgb(189, 150, 8); /* Dark washed rose */
text-shadow: rgb(189, 150, 8) 0px 0px 10px; /* Dark washed rose */
}
.iconOff {
color: darkgrey;
text-shadow: 0px 0px 0px;
}
.v-slider-thumb__surface{
background-color: currentColor;
}
The ui-template nodes are all the same width, (as checked with the browser developer tools) it is the columns that vary
Please supply the export as requested. That will include all the group page and theme settings so we can see if we see the same issue. Also include any relevant css templates you have
It's OK, I see what you mean. There seems to be a fundamental error in the maths somewhere. This example with four buttons (1x1) across a group that is four wide, and two buttons across a group that is two wide shows the problem.
It can be seen that the buttons in the two groups are not the same size. I suspect the problem is that in the 4x1 group there are four buttons and and 5 gaps (including the edges), whereas in the 2x1 group there are two buttons and three gaps. I think the border at the edges should only be half the width of the inter-button borders, then there would be a total of four gaps and two gaps respectively, so they will fit correctly into a group that is half the width.
I have raised an issue for this Widget size varies with group width · Issue #1891 · FlowFuse/node-red-dashboard · GitHub
Thank you
Re-opened just to note that, in the issue linked above, it has been decided not to change the code to make the widget widths uniform, as that would slightly change the appearance of existing dashboards, which could be annoying to many users. Instead the docs have been updated to describe how to use the theme and CSS to adjust the widths accordingly. To quote from the help text from the next dashboard release:
### Making widget widths uniform
A group insets its widgets with a small side padding, and because that padding is shared across the group's columns, a 1×1 widget is a touch narrower in a narrow group than in a wide one. To make widths match across all group sizes, set that padding equal to `(Widget Gap − Group Gap) / 2` using a [`ui-template`](../../nodes/widgets/ui-template.md) CSS override.
For example, with the default 12px gaps, set **Group Gap** to `0` and add:
.nrdb-ui-group .v-card-text {
padding: 6px;
}
Here is the test flow from the issue, with the adjusted theme and CSS override applied.
[{"id":"47069383b4f76581","type":"ui-template","z":"997da33a0beedade","group":"","page":"","ui":"ID-BASE-1","name":"Adjust spacing for equal widget widths","order":0,"width":0,"height":0,"head":"","format":".nrdb-ui-group .v-card-text {\n padding: 6px;\n}","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"site:style","className":"","x":270,"y":6920,"wires":[[]]},{"id":"708fb2e61d38b271","type":"group","z":"997da33a0beedade","name":"Button Width Test","style":{"label":true},"nodes":["bafbd196632d4d9f","4698f660c113e1f3","8fdb7f4e8a8cc6c5","9e35f17b19b7fd0b","adbfdc33663e1abb","82272e556a61cd32","eb3f9d0e95d20745","e7e9e4875d859fb1"],"x":94,"y":6739,"w":832,"h":142},{"id":"bafbd196632d4d9f","type":"ui-button","z":"997da33a0beedade","g":"708fb2e61d38b271","group":"f4cd34922b93a93a","name":"","label":"button","order":5,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":170,"y":6780,"wires":[[]]},{"id":"4698f660c113e1f3","type":"ui-button","z":"997da33a0beedade","g":"708fb2e61d38b271","group":"f4cd34922b93a93a","name":"","label":"button","order":4,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":610,"y":6780,"wires":[[]]},{"id":"8fdb7f4e8a8cc6c5","type":"ui-button","z":"997da33a0beedade","g":"708fb2e61d38b271","group":"f4cd34922b93a93a","name":"","label":"button","order":2,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":470,"y":6780,"wires":[[]]},{"id":"9e35f17b19b7fd0b","type":"ui-button","z":"997da33a0beedade","g":"708fb2e61d38b271","group":"f4cd34922b93a93a","name":"","label":"button","order":1,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":330,"y":6780,"wires":[[]]},{"id":"adbfdc33663e1abb","type":"ui-button","z":"997da33a0beedade","g":"708fb2e61d38b271","group":"f4cd34922b93a93a","name":"","label":"button","order":6,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":730,"y":6780,"wires":[[]]},{"id":"82272e556a61cd32","type":"ui-button","z":"997da33a0beedade","g":"708fb2e61d38b271","group":"f61ab9f04574e6e5","name":"","label":"button","order":1,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":170,"y":6840,"wires":[[]]},{"id":"eb3f9d0e95d20745","type":"ui-button","z":"997da33a0beedade","g":"708fb2e61d38b271","group":"f4cd34922b93a93a","name":"","label":"button","order":3,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":850,"y":6780,"wires":[[]]},{"id":"e7e9e4875d859fb1","type":"ui-button","z":"997da33a0beedade","g":"708fb2e61d38b271","group":"f61ab9f04574e6e5","name":"","label":"button","order":2,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":330,"y":6840,"wires":[[]]},{"id":"f4cd34922b93a93a","type":"ui-group","name":"6x1","page":"94740f3451825304","width":"6","height":1,"order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"f61ab9f04574e6e5","type":"ui-group","name":"2x1","page":"94740f3451825304","width":"2","height":1,"order":2,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"94740f3451825304","type":"ui-page","name":"group width test","ui":"ID-BASE-1","path":"/group_width","icon":"home","layout":"grid","theme":"4c44f59af1869a6e","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":2,"className":"","visible":"true","disabled":"false"},{"id":"4c44f59af1869a6e","type":"ui-theme","name":"Equal widgets theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"0px","groupBorderRadius":"4px","widgetGap":"12px"}},{"id":"ID-BASE-1","type":"ui-base","name":"Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-control","ui-notification"],"showPathInSidebar":false,"headerContent":"page","titleBarStyle":"default","showReconnectNotification":false,"notificationDisplayTime":"1","showDisconnectNotification":true,"allowInstall":true},{"id":"5a1af960470ee01f","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.30.2"}}]
Cheers Colin, however
<template>
<v-card class = "btn-container">
<v-btn class = "btn with-slider" :class = "btnClass" stacked @click="changeState()">
{{btnLabel}}
<v-icon class = "icon basic" :class = "iconClass" >{{iconImage}}</v-icon>
</v-btn>
<v-slider
v-model = "sliderValue"
width = "80%"
:min = "sliderRange.min"
:max = "sliderRange.max"
thumb-size = "12"
:color = "sliderColour"
@end = "updateSlider()">
</v-slider>
</v-card>
</template>
/* New CSS - now updated */
.btn-container {
background-color: #4F4F4F; /* Very dark gray */
border: 1px solid black;
border-radius: 8px;
width: 90%;
height: 100%;
margin-inline-start: 6px; /* Added to centre widget */
}
.btn {
&.basic {
background-color: #4F4F4F; /* Very dark gray */
border: 1px solid black;
border-radius: 8px;
width: 100%;
height: 90%;
}
&.with-slider {
background-color: #4F4F4F; /* Very dark gray */
border-radius: 8px;
width: 100% !important;
height: 70% !important;
}
&.on {
color: rgb(189, 150, 8); /* Dark washed rose */
}
&.off {
color: darkgrey;
}
}
.icon {
&.basic {
font-size: 45px;
height: 45px;
width: 45px;
}
&.on {
color: rgb(189, 150, 8); /* Dark washed rose */
text-shadow: rgb(189, 150, 8) 0px 0px 10px; /* Dark washed rose */
}
&.off {
color: darkgrey;
text-shadow: 0px 0px 0px;
}
}
.v-slider-thumb__surface{
background-color: currentColor;
}
.nrdb-ui-group .v-card-text {
padding: 6px;
}
After
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy
