I have a simple-ish page which is set to Grid layout, and 3 groups each set to 6x1. In each group, there is a template node. In each template I used a v-card which I have given a width of 500: [image] This all looks good on a big screen but as I start to make is smaller the right side of the v-ca…

Thanks for pointing about 100%, because I was struggling with same behavior while copy/pasting examples from Vuetify playground. <template> <v-sheet class="mx-auto" width="100%"> <v-form ref="form"> <v-container> ... works fine for me

Hmmm, thats odd. Template 100% width is exactly what I would expect you need to do. Do you have a small reproducable example you can share?

I exported the 3 template nodes for you. It will no do much without context data, but will at least render the v-cards. [{"id":"9d0d7f0104f44d8a","type":"ui-template","z":"dd535f73e60cae86","group":"e0d58841230b2c65","page":"","ui":"","name":"Rule List","order":1,"width":"6","height":"1","head":"",…

Thanks a lot, it works great. Somehow I missed this information that Vue is 12 grid wide. Now it all make sense.

Vue isn't - Dashboard (built on Vue) is :smile: - docs

V-card to use width of group

Dashboard

KarolisL 24 July 2024 05:33 5

I don't know if I understood it correctly, but here is my attempt:

Vue uses grid system of 12. Your groups were set for width 6, meaning one will be moved to another row.

I reduced all group widths to 4. And changed to <v-card class="mx-auto" color="white" width="100%">

2 Likes

Topic		Replies	Views
Assistance with ui-template in setting v-card width Dashboard	10	116	26 September 2025
Change Dashboard css width FAQs	7	4259	15 October 2022
Group text not "working" Dashboard	2	430	23 April 2019
A Strange Anomaly With Column Widths Dashboard 2.0 Dashboard dashboard-2	9	211	4 November 2025
Anyone know how to resize this button? Dashboard	11	3223	25 November 2018

V-card to use width of group

Related topics