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;">