# Assistance with ui-template in setting v-card width

**URL:** https://discourse.nodered.org/t/assistance-with-ui-template-in-setting-v-card-width/98855
**Category:** Dashboard
**Created:** [27 August 2025 12:29 UTC](https://discourse.nodered.org/t/assistance-with-ui-template-in-setting-v-card-width/98855 "2025-08-27T12:29:54Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![k5map](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/k5map/32/47681_2.png) [@k5map](https://discourse.nodered.org/u/k5map)
#### Post date: [27 August 2025 12:29 UTC](https://discourse.nodered.org/t/assistance-with-ui-template-in-setting-v-card-width/98855/1 "2025-08-27T12:29:54Z")

</div>

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.

```auto
<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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/0/802dc88370748065b54acc8cb5b01d20fb1f46de.png)

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [27 August 2025 12:47 UTC](https://discourse.nodered.org/t/assistance-with-ui-template-in-setting-v-card-width/98855/2 "2025-08-27T12:47:10Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![k5map](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/k5map/32/47681_2.png) [@k5map](https://discourse.nodered.org/u/k5map)
#### Post date: [27 August 2025 12:59 UTC](https://discourse.nodered.org/t/assistance-with-ui-template-in-setting-v-card-width/98855/3 "2025-08-27T12:59:20Z")

</div>

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

[flows.json](https://discourse.nodered.org/uploads/short-url/1VUT4JZaYJZn4Buf4EDY1h3MB4Y.json) (32.4 KB)

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [27 August 2025 13:00 UTC](https://discourse.nodered.org/t/assistance-with-ui-template-in-setting-v-card-width/98855/4 "2025-08-27T13:00:06Z")

</div>

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

````auto
``` 
   code goes here 
```

````

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

See this post for more details - [How to share code or flow json](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506)

---

<div class="post-metadata">

### Author: ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)
#### Post date: [27 August 2025 13:04 UTC](https://discourse.nodered.org/t/assistance-with-ui-template-in-setting-v-card-width/98855/5 "2025-08-27T13:04:44Z")

</div>

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

---

<div class="post-metadata">

### Author: ![k5map](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/k5map/32/47681_2.png) [@k5map](https://discourse.nodered.org/u/k5map)
#### Post date: [27 August 2025 13:06 UTC](https://discourse.nodered.org/t/assistance-with-ui-template-in-setting-v-card-width/98855/6 "2025-08-27T13:06:41Z")

</div>

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

---

<div class="post-metadata">

### Author: ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)
#### Post date: [27 August 2025 13:14 UTC](https://discourse.nodered.org/t/assistance-with-ui-template-in-setting-v-card-width/98855/7 "2025-08-27T13:14:07Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![k5map](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/k5map/32/47681_2.png) [@k5map](https://discourse.nodered.org/u/k5map)
#### Post date: [27 August 2025 13:17 UTC](https://discourse.nodered.org/t/assistance-with-ui-template-in-setting-v-card-width/98855/8 "2025-08-27T13:17:00Z")

</div>

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

---

<div class="post-metadata">

### Author: ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)
#### Post date: [27 August 2025 13:30 UTC](https://discourse.nodered.org/t/assistance-with-ui-template-in-setting-v-card-width/98855/9 "2025-08-27T13:30:41Z")

</div>

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

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/8/f8aa74ab1016f3feeda14cb44d35c718f3cc4394.png)

---

<div class="post-metadata">

### Author: ![k5map](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/k5map/32/47681_2.png) [@k5map](https://discourse.nodered.org/u/k5map)
#### Post date: [27 August 2025 13:35 UTC](https://discourse.nodered.org/t/assistance-with-ui-template-in-setting-v-card-width/98855/10 "2025-08-27T13:35:58Z")

</div>

That fixed it… much thanks.

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [26 September 2025 13:36 UTC](https://discourse.nodered.org/t/assistance-with-ui-template-in-setting-v-card-width/98855/11 "2025-09-26T13:36:14Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.