I'm attempting to create a toolbar with pagination control aligned to the right, featuring smaller pagination control buttons.
To achieve this, I took the following steps:
- Wrapped
v-paginationinspan(sincev-spacerdid not work without this) - Added
v-spacer - Implemented custom CSS
However, even after making these changes, the pagination control is still not functioning correctly.
Below is a demonstration of the issue: while both controls are set to display 5 pages, the one with custom styling is failing to show all 5 icons.
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
pageDefault: 1,
pageCustom: 1,
}),
});
Vue.config.productionTip = false
Vue.config.devtools = false.custom .v-pagination__navigation {
height: 26px !important;
width: 26px !important;
}
.custom .v-pagination__navigation .v-icon {
font-size: 16px !important;
}
.custom .v-pagination__item {
height: 26px !important;
min-width: 26px !important;
font-size: 0.85rem !important;
}
.right {
width: auto !important;
margin-left: auto !important;
}<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99fff6f7edd9adb7e1">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3e484b5b4a5758477e0c1046">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app>
<v-content>
<v-toolbar
dark
dense
>
<v-toolbar-title>With Default Style</v-toolbar-title>
<v-spacer> </v-spacer>
<span>
<v-pagination
v-model="pageDefault"
:length="5"
light
circle
/>
</span>
</v-toolbar>
<v-toolbar
dark
dense
>
<v-toolbar-title>With Custom Style</v-toolbar-title>
<v-spacer> </v-spacer>
<span>
<v-pagination
class="custom"
v-model="pageCustom"
:length="5"
light
circle
/>
</span>
</v-toolbar>
<v-toolbar
dark
dense
>
<v-toolbar-title>Codeply-er suggestion</v-toolbar-title>
<v-pagination
class="custom right"
v-model="pageCustom"
:length="5"
light
circle
/>
</v-toolbar>
</v-content>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0b7d7e6e4b392573">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e181b0b1a0708172e5c4016">[email protected]</a>/dist/vuetify.js"></script>