I have encountered an issue on a page with multiple components. One of the components contains a <v-speed-dial> with a fab button. The problem is that when I open the speed dial, it gets placed below the component immediately below it.
To give you a better idea, here is a screenshot: https://i.sstatic.net/xJM8x.png
Below is the code snippet:
<template>
<v-card outlined>
<v-card-title>Selection</v-card-title>
<v-toolbar height="80" elevation="0">
<v-speed-dial class="mb-5" direction="bottom">
<template v-slot:activator>
<v-btn text fab>
<v-icon :color="myIcon.color" x-large>{{ myIcon.name }}</v-icon>
</v-btn>
</template>
<v-btn fab small color="green">
<v-icon color="white" x-large @click="changeStatusToUp()">mdi-chevron-up</v-icon>
</v-btn>
<v-btn fab small color="grey">
<v-icon color="white" x-large @click="changeStatusToMid()">mdi-unfold-less-vertical</v-icon>
</v-btn>
<v-btn fab small color="red">
<v-icon color="white" x-large @click="changeStatusToDown()">mdi-chevron-down</v-icon>
</v-btn>
</v-speed-dial>
</v-toolbar>
</v-card>
If needed, here is the JavaScript code:
<script>
export default {
name: "Selection",
data() {
return {
myIcon: {
name: 'mdi-unfold-less-vertical',
color: 'grey'
},
colors: {
red: 'red',
green: 'green',
grey: 'grey'
}
}
},
props: {},
computed: {},
methods: {
changeStatusToUp() {
this.myIcon.name = 'mdi-chevron-up'
this.myIcon.color = 'green'
}
,
changeStatusToDown() {
this.myIcon.name = 'mdi-chevron-down'
this.myIcon.color = 'red'
}
,
changeStatusToMid() {
this.myIcon.name = 'mdi-unfold-less-vertical'
this.myIcon.color = 'grey'
}
}
};
Although everything works correctly and the speed dial opens in different directions as expected, it still remains hidden under the component located beneath it. Any assistance in resolving this issue would be greatly appreciated!