Items in Vuetify list subgroup not stacking vertically - list

Question

I've taken over a Vue (2.5.22) app with Vuetify (1.4.3), and the app has a left nav that uses v-list and v-list-group elements:
<template>
<v-list dark class="ap-sidebar-applist">
<v-list-group
class="ap-sidebar-group"
v-for="(item, i) in items"
:key="i"
:prepend-icon="item.icon"
:value="item.visible"
#click="onClick(item)"
>
<v-list-tile slot="activator">
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile>
<v-list-group
v-if="item.children"
sub-group
no-action
class="ap-sidebar-subgroup"
>
<v-list-tile slot="activator"
v-for="(subMenu, j) in item.children"
:key="j"
#click="onClick(subMenu, true)"
>
<v-list-tile-action>
<v-icon>{{ subMenu.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-title>{{ subMenu.title }}</v-list-tile-title>
</v-list-tile>
</v-list-group>
</v-list-group>
</v-list>
</template>
export default {
name: 'TheLeftSidebarAppList',
props: {
visible: Boolean,
},
data: () => ({
items: [
{
icon: 'group',
title: 'Users',
routeTo: 'UserEdit',
method: null,
superOnly: false,
taCanView: true,
visible: true,
children: [
{
icon: 'send',
title: 'Send Quick Alert',
method: 1,
},
],
},
{
icon: 'domain',
title: 'Tenants',
routeTo: 'TenantEdit',
method: null,
superOnly: false,
taCanView: true,
visible: false,
children: [
{
icon: 'fingerprint',
title: 'Manage Biometrics',
method: 1,
},
{
icon: 'email',
title: 'Manage Templates',
method: 1,
},
],
},
{
icon: 'assessment',
title: 'Reports',
routeTo: 'WorkspaceReports',
method: null,
superOnly: false,
taCanView: true,
visible: false,
},
{
icon: 'settings',
title: 'Server Configuration',
routeTo: null,
method: 2,
superOnly: false,
taCanView: false,
visible: false,
},
{
icon: 'trending_up',
title: 'Performance',
routeTo: 'WorkspacePerformance',
method: null,
superOnly: true,
taCanView: true,
visible: false,
},
],
}),
}
I want to add two items under the Tenants item by adding a children array in the data:
{
icon: 'domain',
title: 'Tenants',
routeTo: 'TenantEdit',
method: null,
superOnly: false,
taCanView: true,
visible: false,
children: [
{
icon: 'fingerprint',
title: 'Manage Biometrics',
method: 1,
},
{
icon: 'email',
title: 'Manage Templates',
method: 1,
},
],
},
but when it is displayed, the children items are displayed horizontally, instead of being stacked vertically:
From everything I've seen, they should stack vertically, but they don't. What do I need to do to get them to be stacked vertically?
UPDATE: This component is included in a parent component that wraps this in a <v-navigation-drawer> component:
<template>
<v-navigation-drawer
v-model="visible"
fixed
app
dark
class="primary"
>
<v-toolbar flat class="ap-img-toolbar">
<v-list class="pa-0">
<v-list-tile>
<v-list-tile-action>
<img src="/images/LogoSmall.png">
</v-list-tile-action>
</v-list-tile>
</v-list>
</v-toolbar>
<TheLeftSidebarAppList />
</v-navigation-drawer>
</template>

Answer 1

Remove the slot="activator" from the <v-list-tile> containing the children and that will take care of the horizontal issue.
I have created a working Codepen using your example.
Hope it helps :)