My goal is to align two components in order to display data on two columns. I followed the official Vuetify Grid tutorial, but encountered some issues with fixed row components. Despite trying to change from row
to column
, it still doesn't work as expected and remains 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>
https://i.sstatic.net/MpX81.png
Here's the complete 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 noticed that setting the background color to black on v-container
was causing the issue. Now the challenge is fixing it.
<v-container style="background-color: black;">