Как исправить положение заголовка диалога Vuetify наверху и сделать кнопки всегда видимыми

Question

Я пытался сохранить заголовок диалога Vuetify и заголовки содержимого, зафиксированные в верхней части при прокрутке.Я использовал «style:» position: fixed ». Когда я прокручиваю, заголовок и заголовки становятся вне поля зрения. Текущий код соответствует приведенному ниже

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

Вот функция, которая вызывает диалог

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

Результат, который я получаю, выглядит следующим образом

Пожалуйста, предложите способ сохранитьсодержимое (заголовок и заголовки таблицы) фиксируется сверху и для прокрутки содержимого таблицы.Кроме того, есть ли способ, чтобы кнопки действий всегда были видны?

Заранее спасибо!

Answer 1

Наконец, я исправил это сам

Речь шла о добавлении реквизита "scrollable" в компонент "v-dialog", а затем о настройке высоты компонента "v-card-text"

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

Теперь результат при желании выглядит следующим образом.Заголовок и заголовки остаются сверху, а кнопка всегда видна снизу.