How to Fix the position of Vuetify Dialog Title to the top and make buttons always visible

3
votes

I was trying to keep the Vuetify dialog title and the headers of the content fixed to the top while scrolling. I used "style:"position:fixed". When I scroll, the heading and the headers become out of the view. The current code is as given below

    <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>

Here is the function that calls the dialog

handleDialog()
{
  this.dialogTipsHeading = "Roughness Parameters of Transportation channel Materials"
  
  this.dialogTipsBtn1 = ""
  this.dialogTipsBtn2 = "OK"
  this.dialogTableOn = true,
  this.isDialogTips = true
 }

The result that I get is like this

enter image description here

Please suggest a way to keep the content(The heading and the Table headers) fixed at the top and to scroll the table content. Also, is there a way to keep the action buttons always visible?

Thank you in advance!

1
javascriptvue.jsdialogvuetify.js
This helped me. Thank you for sharing – Billal Begueradj

1 Answers

7
votes

Finally, I fixed it myself

It was about adding a prop "scrollable" in the "v-dialog" component and then setting the height of the "v-card-text" component

<v-dialog scrollable v-model = "isDialogTips"
    max-width = 800 >

  ....
  code (title/heading/headers)
  ...

  <v-card-text
  style = "height: 600px;" >
    ....
    code
    .... 
  </v-card-text>

</v-dialog>

Now, the result, as desired, looks like this. The heading and the headers stay at the top and the button is always visible at the bottom. New Result resolved