admin管理员组文章数量:1323744
I want to align two ponents to show some data on two columns, I've followed the official tutorial Vuetify Grid. On my case ponents are fixed like a rows list, on the screen I put the red square to show my goal, and show the result of the code. Also, I tried changing row
to column
but not works, it keep on two rows.
<v-container>
<v-layout row>
<v-flex xs6>Associado: {{item.nameUser}}</v-flex>
<v-flex xs6>Associado: {{item.nameUser}}</v-flex>
</v-layout>
</v-container>
plete code
<template>
<v-content class="pa-1" fluid>
<v-btn
color="blue"
dark
small
fixed
bottom
right
fab
@click="showRegisterTransactionDialog = true"
>
<v-icon>mdi-plus</v-icon>
</v-btn>
<v-data-table
:mobile-breakpoint="NaN"
:headers="headers"
:items="transactionsLocal"
:items-per-page="3000"
:hide-default-footer="true"
:single-expand="singleExpand"
:expanded.sync="expanded"
item-key="id"
show-expand
sort-by="showDate"
class="elevation-1"
>
<template v-slot:top>
<v-toolbar flat color="white">
<v-toolbar-title>Fluxo de caixa</v-toolbar-title>
<v-divider class="mx-4" inset vertical></v-divider>
<v-spacer></v-spacer>
</v-toolbar>
</template>
<template v-slot:item.value="{ item }">
<div style="color:green;" v-if="item.type == 'entry'">{{item.value}}</div>
<div v-else style="color:red;">{{item.value}}</div>
</template>
<template v-slot:expanded-item="{ headers, item }">
<v-container>
<v-layout row>
<v-flex xs6>Associado: {{item.nameUser}}</v-flex>
<v-flex xs6>Associado: {{item.nameUser}}</v-flex>
</v-layout>
</v-container>
</template>
</v-data-table>
<RegisterTransactionDialog
@hideRegisterTransactionDialog="showRegisterTransactionDialog = false"
:show="showRegisterTransactionDialog"
></RegisterTransactionDialog>
</v-content>
</template>
UPDATE
I've set background color to black on v-container
and discover that the problem is it. But, I don't know fix it too.
<v-container style="background-color: black;">
I want to align two ponents to show some data on two columns, I've followed the official tutorial Vuetify Grid. On my case ponents are fixed like a rows list, on the screen I put the red square to show my goal, and show the result of the code. Also, I tried changing row
to column
but not works, it keep on two rows.
<v-container>
<v-layout row>
<v-flex xs6>Associado: {{item.nameUser}}</v-flex>
<v-flex xs6>Associado: {{item.nameUser}}</v-flex>
</v-layout>
</v-container>
plete code
<template>
<v-content class="pa-1" fluid>
<v-btn
color="blue"
dark
small
fixed
bottom
right
fab
@click="showRegisterTransactionDialog = true"
>
<v-icon>mdi-plus</v-icon>
</v-btn>
<v-data-table
:mobile-breakpoint="NaN"
:headers="headers"
:items="transactionsLocal"
:items-per-page="3000"
:hide-default-footer="true"
:single-expand="singleExpand"
:expanded.sync="expanded"
item-key="id"
show-expand
sort-by="showDate"
class="elevation-1"
>
<template v-slot:top>
<v-toolbar flat color="white">
<v-toolbar-title>Fluxo de caixa</v-toolbar-title>
<v-divider class="mx-4" inset vertical></v-divider>
<v-spacer></v-spacer>
</v-toolbar>
</template>
<template v-slot:item.value="{ item }">
<div style="color:green;" v-if="item.type == 'entry'">{{item.value}}</div>
<div v-else style="color:red;">{{item.value}}</div>
</template>
<template v-slot:expanded-item="{ headers, item }">
<v-container>
<v-layout row>
<v-flex xs6>Associado: {{item.nameUser}}</v-flex>
<v-flex xs6>Associado: {{item.nameUser}}</v-flex>
</v-layout>
</v-container>
</template>
</v-data-table>
<RegisterTransactionDialog
@hideRegisterTransactionDialog="showRegisterTransactionDialog = false"
:show="showRegisterTransactionDialog"
></RegisterTransactionDialog>
</v-content>
</template>
UPDATE
I've set background color to black on v-container
and discover that the problem is it. But, I don't know fix it too.
<v-container style="background-color: black;">
- Can't reproduce. There's something else messing up your layout. – akuiper Commented May 18, 2020 at 2:40
- i couldn't see any problem when i test your case here: codepen.io/salihtopcu/pen/yLYQYob are you sure that there's no style definitions that may cause this issue? – salihtopcu Commented May 18, 2020 at 3:18
-
No, there's not. I just posted the whole code, It's used inside a
v-data-table
, maybe have something to do it. – Augusto Commented May 18, 2020 at 3:58 - Here is a solution that you can consider – asega Commented Jun 15, 2022 at 12:42
1 Answer
Reset to default 6Why not try using something like this instead of v-flex:
<v-col cols="12" md="6">
</v-col>
<v-col cols="12" md="6">
</v-col>
本文标签: javascriptHow to put components on two columns using VueJS Vuetify GridStack Overflow
版权声明:本文标题:javascript - How to put components on two columns using VueJS Vuetify Grid? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742118167a2421567.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论