How can I add scrollbar vertical in the modal dialog on the vuetify?

问题

My code like this :

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-dialog
            v-for='foo, k in foos' :key='foo.id'
            :close-on-content-click="false"
            transition="scale-transition"
            :return-value.sync="foo.date"
            min-width="290px" 
            v-model="modal[k]"
            :ref="'dialog' + k"
        >
            <template v-slot:activator="{ on }">
                <v-btn color="success" dark v-on="on">call date {{foo.id}} {{ foo.date }}</v-btn>
            </template>

            <v-row justify="center">
            <v-date-picker v-model="foo.date" @input="changeHours">
                <div class="flex-grow-1"></div>
                <v-btn text color="primary" @click="modal[k] = false">Cancel</v-btn>
                <v-btn text color="primary" @click="$refs['dialog' + k][0].save(foo.date)">OK</v-btn>
            </v-date-picker>
            <v-slide-y-transition>
            <v-col cols=2 v-show="foo.date !== null"  :style="{'background-color':'white'}">
              <template v-for="allowedTime in allowedTimes">
                <v-btn
                  @click="setTime(allowedTime)"
                  class="my-2"
                  :outlined="allowedTime !== time"
                  block
                  x-large
                  color="primary"
                >{{ allowedTime }}</v-btn>
              </template>
            </v-col>
            </v-slide-y-transition>
            </v-row>
        </v-dialog>    
      </v-container>
    </v-content>
  </v-app>
</div>

demo is like this :

https://codepen.io/positivethinking639/pen/YzzwYZq

I want when there is a lot of time, scrollbar automatically appears in the modal dialog

how can i do it?

回答1:

Added a v-flex wrapper around content area inside v-dialog, then set width limit for row to restrict, Now its working as expected

add css

.row {
margin-right: 0 !important;
}

Updated codepen here: https://codepen.io/chansv/pen/GRRqLyp

    <div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-dialog
            v-for='foo, k in foos' :key='foo.id'
            :close-on-content-click="false"
            transition="scale-transition"
            :return-value.sync="foo.date"
            v-model="modal[k]"
             max-width="390px"
            :ref="'dialog' + k"
        >
            <template v-slot:activator="{ on }">
                <v-btn color="success" dark v-on="on">call date {{foo.id}} {{ foo.date }}</v-btn>
            </template>

          <v-flex row-wrap justify-center>
            <v-row>
            <v-date-picker v-model="foo.date" @input="changeHours">
                <div class="flex-grow-1"></div>
                <v-btn text color="primary" @click="modal[k] = false">Cancel</v-btn>
                <v-btn text color="primary" @click="$refs['dialog' + k][0].save(foo.date)">OK</v-btn>
            </v-date-picker>
            <v-col class="col-3" v-show="foo.date !== null"  :style="{'background-color':'white'}">
              <template v-for="allowedTime in allowedTimes">
                <div>
                <v-btn
                  @click="setTime(allowedTime)"
                  class="my-2"
                  :outlined="allowedTime !== time"
                         large
                  color="primary"
                       >{{ allowedTime }}</v-btn></div>
              </template>
            </v-col>
            </v-row>
            <v-flex>
        </v-dialog>    
      </v-container>
    </v-content>
  </v-app>
</div>

来源：https://stackoverflow.com/questions/58421324/how-can-i-add-scrollbar-vertical-in-the-modal-dialog-on-the-vuetify