Assistance with ui-template in setting v-card width

Dashboard
1

I have limited knowledge with CSS and found v-card code online which I used as a starting point. I’ve been able to modify it to almost get the results desired. I have reached a point whereby I cannot get the width of the card to go wider to align the columns as desired. Below is the current code along with a screenshot of the v-card. Looking for any assistance in increasing the width of the v-card.

<template>
    <v-card class="mx-auto">

        <v-card-item title="OWM Forecast Card">
                <template v-slot:subtitle>
                    {{ payload.daily[0].summary }}
                </template>
        </v-card-item>

        <v-card-text class="py-0">
            <div class="d-flex py-2 justify-space-between"></div>
            <v-row align="center" no-gutters>
                <v-col class="text-h2" cols="10">
                    {{ payload.current.temp }}&deg;F
                </v-col>
                icon</br>
                </v-col>
            </v-row>
            <div class="d-flex py-2 justify-space-between"></div>
            <v-row align="center" no-gutters>
                <v-col cols="3" class="text-center">
                    <v-icon :icon="payload.daily[1].icon" size="45"></v-icon><br/>
                    {{ payload.hourly[1].time }}<br/>
                    {{ payload.hourly[1].temp}}&deg;F<br/>
                    {{ payload.hourly[1].humidity}}%</br>
                    {{ payload.hourly[1].wind_speed}} m/h</br>
                    {{ payload.hourly[1].wind_dir}}</br>
                </v-col>
                <v-col cols="3" class="text-center">
                    icon<br/>
                    {{ payload.hourly[2].time }}<br/>
                    {{ payload.hourly[2].temp}}&deg;F<br/>
                    {{ payload.hourly[2].humidity}}%</br>
                    {{ payload.hourly[2].wind_speed}} m/h</br>
                    {{ payload.hourly[2].wind_dir}}</br>
                </v-col>
                <v-col cols="3" class="text-center">
                    icon<br/>
                    {{ payload.hourly[3].time }}<br/>
                    {{ payload.hourly[3].temp}}&deg;F<br/>                
                    {{ payload.hourly[3].humidity}}%</br>
                    {{ payload.hourly[3].wind_speed}} m/h</br>
                    {{ payload.hourly[3].wind_dir}}</br>
                </v-col>
                <v-col cols="3" class="text-center">
                    icon<br/>
                    {{ payload.hourly[4].time }}<br/>
                    {{ payload.hourly[4].temp}}&deg;F<br/>                
                    {{ payload.hourly[4].humidity}}%</br>
                    {{ payload.hourly[4].wind_speed}} m/h</br>
                    {{ payload.hourly[4].wind_dir}}</br>
                </v-col>
                <v-col cols="3" class="text-center">
                    icon<br/>
                    {{ payload.hourly[5].time }}<br/>
                    {{ payload.hourly[5].temp}}&deg;F<br/>                
                    {{ payload.hourly[6].humidity}}%</br>
                    {{ payload.hourly[6].wind_speed}} m/h</br>
                    {{ payload.hourly[6].wind_dir}}</br>
                </v-col>
                <v-col cols="3" class="text-center">
                    icon<br/>
                    {{ payload.hourly[6].time }}<br/>
                    {{ payload.hourly[6].temp}}&deg;F<br/>                
                    {{ payload.hourly[6].humidity}}%</br>
                    {{ payload.hourly[6].wind_speed}} m/h</br>
                    {{ payload.hourly[6].wind_dir}}</br>
                </v-col>
            </v-row>
            <v-row>
                </br>
            </v-row>
            <v-row align="center" no-gutters>
                <v-col cols="3" class="text-center">
                    icon<br/>
                    {{ payload.daily[1].day }}<br/>
                    {{ payload.daily[1].temp.min }}&deg;F<br/>
                    {{ payload.daily[1].temp.max }}&deg;F<br/>
                </v-col>
                <v-col cols="3" class="text-center">
                    icon<br/>
                    {{ payload.daily[2].day }}<br/>                    
                    {{ payload.daily[2].temp.min }}&deg;F<br/>
                    {{ payload.daily[2].temp.max }}&deg;F<br/>
                </v-col>            
                <v-col cols="3" class="text-center">
                    icon<br/>
                    {{ payload.daily[3].day }}<br/>
                    {{ payload.daily[3].temp.min }}&deg;F<br/>
                    {{ payload.daily[3].temp.max }}&deg;F<br/>
                </v-col>
                <v-col cols="3" class="text-center">
                    icon<br/>
                    {{ payload.daily[4].day }}<br/>
                    {{ payload.daily[4].temp.min }}&deg;F<br/>
                    {{ payload.daily[4].temp.max }}&deg;F<br/>
                </v-col>
                <v-col cols="3" class="text-center">
                    icon<br/>
                    {{ payload.daily[5].day }}<br/>
                    {{ payload.daily[5].temp.min }}&deg;F<br/>
                    {{ payload.daily[5].temp.max }}&deg;F<br/>
                </v-col>
                <v-col cols="3" class="text-center">
                    icon<br/>
                    {{ payload.daily[6].day }}<br/>
                    {{ payload.daily[6].temp.min }}&deg;F<br/>
                    {{ payload.daily[6].temp.max }}&deg;F<br/>
                </v-col>
            </v-row>
            <v-row align="left" no-gutters>
                </br>Last Update: xxx</br>
            </v-row>
            <div class="d-flex py-2 justify-space-between"></div>
        </v-card-text>
        <v-divider></v-divider>
</template>

<script>
    export default {
        data() {
            return {      
                imageSourceURL: 'https://openweathermap.org/img/wn/',                
                expand: false,     
                payload: {}    
            }
        },

        watch: {
            msg: function(){            
                if(this.msg.payload != undefined)  {                    
                    this.payload = this.msg.payload;
                }
            }
        },
        
        computed: {
            // automatically compute this variable whenever VueJS deems appropriate
            iconSource: function() {
                return `${this.imageSourceURL}${this.payload.current.weather[0].icon}.png` 
            },
        },
    }
</script>

Screenshot 2025-08-27 072924
Screenshot 2025-08-27 072924642×709 16.7 KB

2

It would be a good idea to select the template node, Export it and paste it here. Then we can Import that and try it. Include some inject nodes to feed it sample data if that would be useful.

3

@Colin … thanks for the suggestion. Here it is.

flows.json (32.4 KB)

4

In order to make code readable and usable it is necessary to surround your code with three backticks (also known as a left quote or backquote ```)

``` 
   code goes here 
```

You can edit and correct your post by clicking the pencil :pencil: icon.

See this post for more details - How to share code or flow json

5

Wouldn't it be easier to use a table node?
e.g. the native ui table, or @omrid01\node-red-2-table-tabulator?

6

Not all of the data will be shown in a table. There are elements which I need to be free form.

7

You ARE already using a table in your v-card (it has v-row's and v-col's).
In a table node, you can set any info type in any cell - image, chart, animations, free text, formatted text etc.) and control the height & width much easier.

8

Ok, thanks for the suggestion but I’d like to avoid having to install a new node and just expand the width of my current v-card

9 
<v-card class="mx-auto" width="600px">

image
image697×354 5.46 KB

10

That fixed it… much thanks.