Currently, I am integrating Vuetify into my project and facing an issue with making an element inside a v-row float and fixed while still maintaining the width of the parent element.
Here's the code snippet I am working with:
<v-container>
<v-row class="mb-3" style="position:fixed; z-index:999;" >
<v-col cols="12">
<v-hover>
<template v-slot="{ hover }">
<v-card max-height="50" class="prioritas" :elevation="hover ? 17 : 6">
<v-card dark class="d-flex justify-center
align-self-center kelA" color="blue" max-width="150" height="30">
<span class="mt-1">
Kelurahan Angin
</span>
</v-card>
<v-row style="margin-top:-40px">
<v-col cols="3">
<v-card-text>Test</v-card-text>
</v-col>
<v-col cols="3">
<v-card-text>Test</v-card-text>
</v-col>
<v-col cols="3">
<v-card-text>Test</v-card-text>
</v-col>
<v-col cols="3">
<v-card-text>Test</v-card-text>
</v-col>
</v-row>
</v-card>
</template>
</v-hover>
</v-col>
</v-row>
<v-container>
Although the element is floating above other elements, it is not preserving its width and appears to be shrinking. You can see the issue here: https://i.sstatic.net/RQCP1.png