Vuetify

Vuetify Alert fade after a duration Vuetify Login Form Vuetify Toast Snackbar Demo Vuetify Disable Past Date in DatePicker Vuetify Scrollable Dialog Vuetify Dialog to Confirm Delete Vuetify input File get Selected file name Vuetify validate textarea character limit Vuetify V-Select multiple example Vuetify Checkbox Check All | Uncheck All Example Vuetify Disable Button for Certain Amount of Time Vuetify Validate Email Field Vuetify Change Button Color if Button active or selected Vuetify Change color of v-chip on click Vuetify Image Upload with Preview Vuetify Clear text field using ref Vuetify Disable Future date in Datepicker Vuetify Set Current Date in Datepicker Vuetify rule for Number Between 0 and 999 or no input Vuetify Validation Rule: Allow Empty String or Specific Number of Characters Vuetify Allow only alphanumeric characters in textfield Vuetify Rule Input Text only Accept Number and Dot Vuetify set Confirm Password Validation Rule in text-fields Vuetify Text Field Allow 10 digit Number Vuetify Add Comma to Input Field Automatically Vuetify Check if input contains special characters

Vuetify Scrollable Dialog

Vuetify Scrollable Dialog:In this tutorial, we will create a scrollable dialog using Vuetify. A scrollable dialog can be particularly useful when you have a long list of options to display in a dialog box. In this example, we will create a dialog that allows users to select a country from a list of options.

written

reviewed

updated

Vuetify Scrollable Dialog Code

First, let's take a look at the code for the Vuetify Scrollable Dialog:

Vuetify Scrollable Dialog Example

<v-card class="text-center">
    <h3> Vuetify Scrollable Dialog </h3>
    <v-card-text>
        <v-dialog v-model="dialog" scrollable max-width="300px">
            <template v-slot:activator="{ on, attrs }">
                <v-btn color="primary" dark v-bind="attrs" v-on="on">Open Dialog
                </v-btn>
            </template>
            <v-card>
                <v-card-title>Select Country</v-card-title>
                <v-divider></v-divider>
                <v-card-text style="height: 300px;">
                    <v-radio-group v-model="dialogm1" column>
                        <v-radio label="Bahamas, The" value="bahamas"></v-radio>
                        <v-radio label="Bahrain" value="bahrain"></v-radio>
                        <v-radio label="Bangladesh" value="bangladesh"></v-radio>
                        <v-radio label="Barbados" value="barbados"></v-radio>
                    </v-radio-group>
                </v-card-text>
                <v-divider></v-divider>
                <v-card-actions>
                    <v-btn color="blue darken-1" text @click="dialog = false">
                        Close
                    </v-btn>
                    <v-btn color="blue darken-1" text @click="dialog = false">
                        Save
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </v-card-text>
</v-card>

Run

In this code snippet:

We use the <v-card> component to create a card with a title "Vuetify Scrollable Dialog."
Inside the card's content, we use a <v-dialog> component to create the dialog. The scrollable attribute allows the dialog's content to be scrollable when it exceeds the specified height. We set a max-width of 300px for the dialog.
The "Open Dialog" button that triggers the dialog is created using a <v-btn> component. We use a template to bind the attrs and on properties to the button.
Inside the dialog, we have a card containing a title "Select Country" and a scrollable list of countries represented by <v-radio> components.
We also include "Close" and "Save" buttons within the dialog's actions, which allow you to close the dialog

JavaScript Code

To handle the dialog's state and selected country, we use the following JavaScript code

<script>
        new Vue({
            el: '#app',
            vuetify: new Vuetify(),
            data: () => ({
                dialogm1: '',
                dialog: false,
            }),
        })
</script>

This code initializes a Vue instance, sets up Vuetify, and defines the data properties dialogm1 and dialog. The dialog property controls the visibility of the dialog, and dialogm1 stores the selected country.

Output of Vuetify Scrollable Dialog

Pasted Image

Conclusion

In this tutorial, we created a Vuetify Scrollable Dialog using Vuetify's components and Vue.js. The dialog allows users to select a country from a scrollable list. You can further customize and extend this example to suit your application's needs. Vuetify makes it easy to create stylish and functional dialogs and other UI components for your web projects