Vuetify: Cara Membuat v-list Vertical Scroll dengan Fixed Height

Bekerja dengan vuetify terasa sangat menyenangkan karena tampilannya yang aduhai sedap dipandang mata menggunakan material desaign yang sudah dikenal secara luas oleh orang awam. Dokumentasinya juga sangat jelas dan mudah dipahami oleh pengguna baru sepertiku sekalipun.

Pada kesempatan kali ini, aku akan menuliskan catatan mengenai pembuatan scrolling v-list secara vertical agar tidak banya memakan tempat saat itemnya lumayan banyak.

Permasalahan

Pada saat meletakkan v-list yang memiliki item cukup banyak di dalam sebuah v-dialog ternyata membuat tombol aksi yang terletak di bawahnya tidak tampak secara default karena tertimpa oleh item v-list. Untuk menjalankan aksi pada tombol tersebut, pengguna harus melakukan scroll v-dialog ke bawah sampai item terakhir sampai tombol aksinya tampak. UI seperti ini akan mengurangi kenyamanan user experience.

Solusi Mudah

Solusi yanng aku terapkan selama ini adalah menambahkan vertical scroll pada v-list. Kalau pada permasalahan di atas yang memiliki scroll adalah v-dialog yang dibuat secara otomatis jika item vuetify melebihi tinggi layar.

Cara memnbuat verticall scroller pada v-list sangatlah mudah. Tinggal menambahkan dua atribut berikut:

style="max-height: 250px" class="overflow-y-auto"

Pada contoh di atas, ukuran tinggi v-list didefinisikan 250px sedangkan scroll yang diterapkan adalah scroll vertical secara otomatis. Maksudnya adalah tombol scroll akan ditampilkan jika tinggi dari item vuetify melebihi 250px.

Berikut ini adalah contoh kodingan yang aku gunakan.

<v-list style="max-height: 250px" class="overflow-y-auto" two-line>
                        <template v-for="(item, index) in collection.transaction">
                            <v-list-item :key="index">
                                <template v-slot:default="{ active }">
                                    <v-list-item-content>
                                        <v-list-item-title
                                            v-text="item.notes==null?'Tanpa Catatan':item.notes"></v-list-item-title>
                                        <v-list-item-subtitle v-text="item.created_date"></v-list-item-subtitle>

                                    </v-list-item-content>

                                    <v-list-item-action>
                                        <v-list-item-action-text
                                            v-bind:class="{'text-danger': item.account_type==='cred-out','text-success': item.account_type==='cred-in'}"
                                            v-text="new Intl.NumberFormat().format(item.nominal)"></v-list-item-action-text>
                                        <v-list-item-action-text
                                            v-text="item.account_type==='cred-in'?'Menerima':'Memberi'"></v-list-item-action-text>
                                    </v-list-item-action>
                                </template>
                            </v-list-item>

                            <v-divider
                                v-if="index < collection.transaction.length - 1"
                            ></v-divider>
                        </template>
                    </v-list>
vuetify v-list vertical scrolling with fixed height
Hasil penerapan verticall scroller pada v-list. Tombol aksinya tidak ikut scroll jika item v-list cukup banyak