Vuetify: Incorrectly displayed pagination items

Created on 28 Sep 2017 · 3Comments · Source: vuetifyjs/vuetify

Steps to reproduce

Incorrectly displayed pagination items, if you add a Pagination to the Tabs.

Versions

0.15.7

What is expected ?

should be without <span class="pagination__more">...</span>

What is actually happening ?

Incorrectly displayed pagination items, if you add a DataTable to the Tabs.

Reproduction Link

https://codepen.io/anon/pen/OxmjjE?editors=1010

bug help wanted

Source

Antway

Most helpful comment

Because of how both the pagination component calculates how many buttons to show, and how the tabs component renders its tabs, this is might be a hard one to fix.

There are two solutions right now.

1) Put lazy prop on the v-tabs-content that has the pagination component. That way it won't calculate the width until you switch to the tab.

2) Use total-visible="2" on pagination component to force it to only render two buttons (if that's your use case)

nekosaur on 29 Sep 2017

👍2

All 3 comments

Because of how both the pagination component calculates how many buttons to show, and how the tabs component renders its tabs, this is might be a hard one to fix.

There are two solutions right now.

1) Put lazy prop on the v-tabs-content that has the pagination component. That way it won't calculate the width until you switch to the tab.

2) Use total-visible="2" on pagination component to force it to only render two buttons (if that's your use case)

nekosaur on 29 Sep 2017

👍2

Please reference nekosaur's comments as a workaround for this use-case.

johnleider on 9 Feb 2018

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord