I am making a vuetify v-navigation-drawer
with two lists.
If my window has enough height, the two lists looks good like this:
But if I resize my window height to be shorter, the second list wrapped to the bottom like this image:
My drawer template is:
<v-navigation-drawer
id="nav1"
permanent
clipped
app
:width="drawerWidth"
>
<v-row class="fill-height" no-gutters>
<v-col>
<v-navigation-drawer id="nav2" permanent :mini-variant="isMiniVariant">
<v-list>
<v-list-item-group v-model="selectedId" mandatory>
<v-list-item
v-for="(item, i) in mainItems"
:key="i"
>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title v-text="item.name" />
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
</v-navigation-drawer>
</v-col>
<v-col>
<v-list
width="56px"
style="background-color: darkred"
>
<v-list-item-group>
<v-list-item
v-for="(s, index) in subFunctions"
:key="s.name"
:value="index"
style="padding-left: 0px; padding-right: 0px"
>
<v-icon style="margin: 16px">{{ s.icon }}</v-icon>
</v-list-item>
</v-list-item-group>
</v-list>
</v-col>
</v-row>
</v-navigation-drawer>
I want the right list not to be wrapped, even if the scrollbar is visible. How could I achieve this?
I found that the scrollbar is generated by the v-row
.
The default style of v-row
has an attribute of flex-wrap: auto
, so I have to modify my v-row
to have style="flex-wrap: nowrap"
.
Now since there is no scrollbar, the right v-col
will not be wrapped anymore.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.