I got a loop which is outputting some dynamic data and printing out around 10 checkboxes.
I can't seem to figure out how to make sure that the height is fixed so that they continue on the next column. Tried setting height and experimenting with multiple props but to no avail. Do I have no choice but to add multiple forloops that work with different columns?
<v-container>
<v-row>
<v-col lg="4">
<v-checkbox
v-for="(checkbox, index) in allCompanies"
:key="checkbox.id"
v-model="companies[index]"
:label="checkbox.name"
:value="checkbox.id"></v-checkbox>
</v-col>
</v-row>
<v-row
><v-btn color="primary" #click="submitCompanies">Submit</v-btn></v-row
>
</v-container>
Lot of thanks.
So, the answer is that you need to put loop on the column so that checkbox gets arranged in the same row and when ever the total column value exceeds 12pts then the checkbox will be placed on to next row.
<v-container>
<v-row>
<v-col lg="4"
v-for="(checkbox, index) in allCompanies"
:key="checkbox.id">
<v-checkbox
v-model="companies[index]"
:label="checkbox.name"
:value="checkbox.id">
</v-checkbox>
</v-col>
</v-row>
<v-row>
<v-btn color="primary" #click="submitCompanies">Submit</v-btn>
</v-row>
</v-container>
Plus: you can even change the column width for diffrent screen sizes and the same effect can be obtained. For eg: if you need only 2 check box in a row in the screen is medium and if large then 3 check boxes then then give such as
<v-col md="6" lg="4"
v-for="(checkbox, index) in allCompanies"
...
Related
I create a card with some items inside but i cannot change the width of the v-list-items.
When two v-list-items are on same line the length is 50% for each and i need that the left one be wider.
I made one codepen to show my problem (maybe the problem is how i create the items).
If the left item is wider the ellipsis in the text (long text but not so much as for ellipsis) is not necessary.
CodePen
<v-list-item-content class="pt-0">
<v-list-item-title>long text but not so much as for ellipsis</v-list-item-title>
<v-list-item-subtitle>Today</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-content class="pt-0">
<v-list-item-title align="right" class="font-weight-light display-2">180</v-list-item-title>
<v-list-item-subtitle align="right"> </v-list-item-subtitle>
</v-list-item-content>
You can put your <v-list-item-content> inside a <div class="myDiv"> for example and set your desired width or other styles to that class.
I'd like to make the dialog(https://vuetifyjs.com/en/components/dialogs/) fill x% width and x% height of the screen. setting the width=80% does work as expected, the height does nothing though. any idea how to do this?
You need to set the height for the component inside the dialog. For eg, if you are using v-card, inside v-dialog then set the height of v-card. v-dialog will then scale accordingly.
<v-dialog
v-model="dialog"
width="50%"
>
<v-card height="50vh">
//Card contents
</v-card>
</v-dialog>
I'm having some unexpected behavior with breakpoints in Vuetify. I want my columns to be side by side from medium to xl, and for sm and below I want each column to take up the entire row (one on top of the other). What I see is, going from XL to M, the columns are displayed side-by-side, as expected. Once the viewport shrinks to small, they are displayed on top of each other, as expected. But once it gets to xs, they go back to side-by-side, which I don't understand. Here is an abbreviated version of the code. Please let me know if I have anything wrong. I've looked at several posts and what I have seems pretty consistent with proposed solutions.
<template>
<div>
<v-container>
<v-row>
<v-col cols="6" sm="12">
<v-card height="100%">
<v-card-title>Classes</v-card-title>
<v-card-text>
<!-- text redacted for brevity -->
</v-card-text>
</v-card>
</v-col>
<v-col cols="6" sm="12">
<v-card height="100%">
<v-card-title>Requirements</v-card-title>
<v-card-text>
<!-- text redacted for brevity -->
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
</div>
</template>
I've also tried more explicit definitions, to no avail, like the following:
<v-col med="6" sm="12">
<v-col cols="6" med="6" sm="12">
etc...
If I understand correctly, you want 12 spans on xs and sm and 6 from md and up. So, in this case, you need to do:
<v-col cols="12" md="6">
<v-col cols="12" md="6">
PS: "cols" is the xs selector. What you were doing was 6 on xs and 12 on sm.
I am trying to add a sum row to a v-data-table component as well as maintain sorting on the component. I have tried two approaches and both aren't optimal solutions.
Method 1)
After the table has been mounted and the data has been fetched, push another row into the table with the sum of the data.
Something like this:
let total = 0
this.data.forEach(d => {
total += d.someValue
})
this.data.push({
value: total
})
This has the desired result on the table and you can use conditional class binding to bold the last row. The problem with this method is when sorting, the sum row moves like any other row. This is not optimal. The styling is perfect and exactly what I want it to be, but the sorting messes everything up.
Method 2)
Using another v-data-table component with one row (the sum row) and adding it to the v-slot:footer in the parent table.
There are several issues with this method. The headers must be present and be exactly the same (apart from sorting) as the parent table. Otherwise, the spacing of the sum row is wrong (i.e. it's not directly underneath the column it's summing).
Since the headers, are present, there is a noticeable gap in between the footer and the rest of the table. Using display: none; on the footer table header messes up the column spacing as well. I believe Vuetify determines the width of the column by the width of the column header. The way to hide it seems to be using opacity: 0; This removes the headers, but leaves a blank space.
I tried adjusting the margins to bring the table closer to it's parent table, but that causes a new issue. Since the header of footer table is still there, it overlaps the last row of the table and makes the bottom row unusable.
Here's what that approach looks like:
<v-data-table :items-per-page="-1" :headers="headers" :items="items">
<template v-slot:footer>
<v-data-table
:headers="headers"
hide-default-footer
style="font-weight: bold;"
:items="[sum]">
</v-data-table>
</template>
</v-data-table>
Anyone have a proper way to add a summation row while preserving sorting?
You would need to use the body.append or the body.prepend slot. This will allow you to pass in the headers of your table and create a custom row that will persist sorting, filtering and paginating.
<v-data-table :headers="headers" :items="items">
<template v-slot:body.append="{headers}">
<tr>
<td v-for="(header,i) in headers" :key="i">
<div v-if="header.value == 'field1'">
{{field1Total}}
</div>
<div v-if="header.value == 'field2'">
{{field2Total}}
</div>
<div v-else>
<!-- empty table cells for columns that don't need a sum -->
</div>
</td>
</tr>
</template>
</v-data-table>
I have an array of image URls (between 0 and 25 in length) that I'd like to display in a grid that's 1-2 columns wide in a responsive manner (2 columns if on a wide screen, 1 column if on a mobile device, etc.). I have a vue.js app and am using the Vuetify material design system.
How do I set that up so that it automatically creates a new row every for every 2 images on a wide screen? I've added 'row wrap' attributes but don't think it's working. This is my code so far:
<v-container fluid grid-list-md>
<v-layout row wrap>
<v-flex md6>
<v-card v-for="gif in results">
<v-img :src="gif.images.fixed_height_small.url" height="200px"></v-img>
</v-card>
</v-flex>
</v-layout>
</v-container>
Review this documentation. Vuetify has a 12 point grid system.
v-1.5 https://v15.vuetifyjs.com/es-MX/framework/grid
v-2.1.0 https://vuetifyjs.com/es-MX/components/grids
Contains 5 types of media breakpoints that are used to target specific screen sizes or orientations
v-1.5 https://v15.vuetifyjs.com/es-MX/framework/breakpoints
v-2.1.0 https://vuetifyjs.com/es-MX/customization/breakpoints
you must relocate the for cycle, use the breakpoints xs and md
<!-- v-1.5 -->
<v-container fluid grid-list-md>
<!-- xs = 600px full screen (12) -->
<!-- md = 600px or more. half of the screen (6) -->
<v-layout row wrap>
<v-flex xs12 md6 v-for="gif in results">
<v-card >
<v-img :src="gif.images.fixed_height_small.url" height="200px"></v-img>
</v-card>
</v-flex>
</v-layout>
</v-container>