My goal was to make the Vuetify dialog title and content headers stay fixed at the top while scrolling. I attempted using "style:position:fixed". However, when I scroll, the headings go out of view. Below is the current code:
<v-layout row wrap >
<v-flex class="text-xs-center">
<v-dialog v-model="isDialogTips" max-width=800>
<v-card>
<v-card-title
class="text-xs-center justify-center primary title white--text darken-2 font-weight-bold">
{{dialogTipsHeading}}</v-card-title>
<!-- Displaying Tips matrix Headers-->
<v-layout
v-if="dialogTableOn"
row wrap
class="text-xs-center mx-auto pt-2 justify-space-between teal--text darken-4 "
style="width:600px;"
>
....
Table Headers
....
</v-layout>
....
some Table of content
....
<!-- Diplaying dialog buttons -->
<v-layout
>
<v-card-actions
class="text-xs-center mx-auto justify-space-around">
<v-btn v-if="dialogTipsBtn1" class="align-content-center d-flex mx-auto" dark color="red darken-4 font-weight-bold" text @click="clearDialog('no')">{{dialogTipsBtn1}}</v-btn>
<v-btn v-if="dialogTipsBtn2" class="align-content-center d-flex mx-auto font-weight-bold" dark color="green darken-4" text @click="clearDialog('yes')">{{dialogTipsBtn2}}</v-btn>
</v-card-actions>
</v-layout>
</v-card>
</v-dialog>
</v-flex>
</v-layout>Below is the function that triggers the dialog:
handleDialog()
{
this.dialogTipsHeading = "Roughness Parameters of Transportation channel Materials"
this.dialogTipsBtn1 = ""
this.dialogTipsBtn2 = "OK"
this.dialogTableOn = true,
this.isDialogTips = true
}The outcome looks like this:
https://i.sstatic.net/i7uQO.png
I am seeking a solution to keep the content (heading and table headers) fixed at the top while allowing the table content to scroll. Additionally, is there a way to ensure the action buttons are always visible?
Your suggestions are greatly appreciated!