@joepavitt - After the latest updates, the elements I create are no longer conforming to the 1x1 measurements in the "fixed" type. Can you help me with this?
I assume these are template nodes?
Can you share 1 of them?
I'm guessing that the CSS height and/or width you have defined for the widgets no longer matches the fixed row height. I had to adjust the number rows for a similar widget in a Grid layout to 2
<template>
<div class="card_spot_sala">
<div class="button_spot_sala" stacked @click="alternar">
<div class="title_spot_sala">S.Sala</div>
<v-icon class="icon_spot_sala" ref="icon">mdi-track-light</v-icon>
</div>
<v-slider class="barra_spot_sala" :max="254" :min="0" :step="1" thumb-label :thumb-size="10" color="#BD9608"
:track-size="3" v-model="value_barra" @click="barra">
</v-slider>
</div>
</template>
<script>
export default {
data() {
return {
value: '',
value_barra: 0
};
},
mounted() {
this.$socket.on('widget-load:' + this.id, (msg) => {
this.value = msg.payload.state;
this.value_barra = msg.payload.brightness;
if (this.value === "ON") {
this.value_barra = msg.payload.brightness;
this.on_status();
} else {
this.value_barra = 0;
this.off_status();
}
});
},
methods: {
alternar() {
if (this.value === 'ON') {
this.value_barra = 0;
this.off();
} else {
this.value_barra = 10;
this.on();
}
},
barra() {
if (this.value_barra >= 1) {
this.$refs.icon.$el.style.color = '#BD9608';
this.$refs.icon.$el.style.textShadow = `0px 0px 10px rgba(189, 150, 11, ${this.value_barra / 254})`;
this.send({ payload: {state: "ON", brightness: parseInt(this.value_barra)}});
this.value = "ON";
} else {
this.$refs.icon.$el.style.color = '#A9A9A9';
this.$refs.icon.$el.style.textShadow = '0px 0px 0px';
this.send({ payload: { state: "OFF", brightness: 0}});
this.value = "OFF";
}
},
on() {
this.$refs.icon.$el.style.color = '#BD9608';
this.$refs.icon.$el.style.textShadow = `0px 0px 10px rgba(189, 150, 11, ${this.value_barra / 254})`;
if (this.value === 'OFF') {
this.send({ payload: {state: "ON", brightness: parseInt(this.value_barra)}});
}
this.value = "ON";
},
off() {
this.$refs.icon.$el.style.color = '#A9A9A9';
this.$refs.icon.$el.style.textShadow = '0px 0px 0px';
if (this.value === 'ON') {
this.send({ payload: { state: "OFF", brightness: 0}});
}
this.value = "OFF";
},
on_status() {
this.$refs.icon.$el.style.color = '#BD9608';
this.$refs.icon.$el.style.textShadow = `0px 0px 10px rgba(189, 150, 11, ${this.value_barra / 254})`;
this.value = "ON";
},
off_status() {
this.$refs.icon.$el.style.color = '#A9A9A9';
this.$refs.icon.$el.style.textShadow = '0px 0px 0px';
this.value = "OFF";
}
},
watch: {
msg: function() {
if (this.msg.payload.state === "ON") {
if (this.value === "OFF") {
this.value_barra = 10;
this.on_status();
}
} else if (this.msg.payload.state === "OFF") {
if (this.value === "ON") {
this.value_barra = 0;
this.off_status();
}
}
}
}
}
</script>
<style>
.card_spot_sala {
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
background-color: #ffffff40;
border: 1px solid #ffffff40;
border-radius: 14px;
height: 85px;
width: 70px;
}
.button_spot_sala {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
height: 65px;
width: 100%;
background-color: #4F4F4F;
color: #000000;
border-radius: 8px;
cursor: pointer;
padding-top: 4px;
}
.title_spot_sala {
font-size: 10px;
font-weight: bold;
margin: 0 0 2px 0;
line-height: 1;
}
.icon_spot_sala {
font-size: 32px;
transition: all 0.3s ease;
margin: 7px 0 4px 0;
}
.barra_spot_sala {
margin: -8px 0 0 0;
padding: 0 4px;
width: calc(100% - 8px);
}
.barra_spot_sala .v-slider__thumb {
width: 10px;
height: 10px;
}
.barra_spot_sala .v-slider__track {
height: 3px;
}
</style>
What happens if you add:
overflow: hidden; to .card_spot_sala ?
1 Like
Nothing happens. Something changed in the last updates in this sense that ended up messing everything up. I never had a problem with this and in a way I always adjusted things in terms of position, but now I have this problem. It is worth mentioning that the positioning of the elements in node-red is VERY CONFUSING. There is no standard to be analyzed. Elements with the same dimensions, there is no problem. I've been struggling with this for days.
Sorry i meant the barra class, as that is a slider it has padding and margins (probably)
I made the change and had no results... it's worth remembering that there are elements in the same location that are many times larger than this and are normal in 1x1... I can't find the point where these slider bars enter the dashboard... they appear randomly in certain elements...
In the latest update, there was a fix to better adhere to the users chosen size. This was after many complaints about mis-aligned widgets. Unfortunately, your template items are larger than 1x1 - which is evident when I use your VUE code i get this:
The issue is the content is too big for the fixed size 1x1 space.
You can either modify your template content, increase the size of the widget, or add suitable CSS to disable scrollbars.
You're right, the alignments were tricky to achieve, but I had already mastered them. There is the real problem that in order to remove the bars I will have to go to 2x2.. which will create excessive space. in the panel. I am a simple enthusiast who is working to improve my use of node-red.. can you adjust the element and leave it here for me to copy? It also confuses me to have an element with the same size and without the scroll bar.
You need to figure out which element is causing the overflow to appear and put a overflow:hidden on it, then the scrollbars will disappear.
