Open ik9999 opened 5 years ago
Related: #639 .
I agree about this issue, it should be fixed with some sort of delay on mount or create. Here's some of my screenshots related to this issue:
On load, the header columns are incorrectly sized:
This is it after resizing the page, which fixes it the column headers somehow
@ik9999 Please share your code how you used the ResizeObserver to fix this issue with VGT, or make a pull request. Others are having this same issue and can find help from you here in this thread to resolve the issue.
@zacharytyhacz Delay won't help because div can be resized by js and the table won't adapt.
Here is the change i've made in src/components/Table.vue:
diff --git a/src/components/Table.vue b/src/components/Table.vue
index da0c27c..458e69e 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -310,6 +310,7 @@ import VgtPagination from './VgtPagination.vue';
import VgtGlobalSearch from './VgtGlobalSearch.vue';
import VgtTableHeader from './VgtTableHeader.vue';
import VgtHeaderRow from './VgtHeaderRow.vue';
+import ResizeObserver from 'resize-observer-polyfill';
// here we load each data type module.
import * as CoreDataTypes from './types/index';
@@ -398,6 +399,7 @@ export default {
data: () => ({
// loading state for remote mode
tableLoading: false,
+ resizeObserver: null,
// text options
nextText: 'Next',
@@ -1469,8 +1471,23 @@ export default {
if (this.perPage) {
this.currentPerPage = this.perPage;
}
+ this.resizeObserver = new ResizeObserver((entries, observer) => {
+ if (this.$refs['table-header-primary']) {
+ this.$refs['table-header-primary'].setColumnStyles();
+ }
+ if (this.$refs['table-header-secondary']) {
+ this.$refs['table-header-secondary'].setColumnStyles();
+ }
+ });
+ this.resizeObserver.observe(this.$el);
this.initializeSort();
},
+ beforeDestroy() {
+ if (this.resizeObserver) {
+ this.resizeObserver.disconnect();
+ }
+ },
+
components: {
'vgt-pagination': VgtPagination,
Also, resize-observer-polyfill
package is needed. Im not sure how fast ResizeObserver is, so i dont know whether its ok to merge it into master.
@ik9999 I would definitely consider it as a good pull request, there's ~ 3 issues regarding this issue and would help out a bunch of people.
Issue Type (delete the irrelevant ones)
Specs
What version are you using? 2.18.0
What browser? Chrome
Expected Behavior
What did you expect to happen?
Re-calculated column width
Actual Behavior
What actually happened?
When table is getting resized without resizing the window, header column widths aren't getting re-calculated here which leads to incorrectly aligned table header cells.
Steps to Reproduce the Problem
Resize the table container without resizing the screen.
I have a working solution using ResizeObserver (polyfill). Not sure if its worth a pull request or not.