From 1ca3ed701e97902048c824017b2cfd5d2200566a Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Tue, 3 Dec 2019 14:21:05 +0100
Subject: [PATCH] Fix responsiveness in on the demo page
For some reason setting autoWidth and setting the table width to 100% makes it work.
Only on the demo page though and not in the app, but it's a start.
---
.../src/vpu-data-table-view.js | 20 ++++++++++---------
1 file changed, 11 insertions(+), 9 deletions(-)
diff --git a/packages/data-table-view/src/vpu-data-table-view.js b/packages/data-table-view/src/vpu-data-table-view.js
index 3d5e9cc6..c42488e0 100644
--- a/packages/data-table-view/src/vpu-data-table-view.js
+++ b/packages/data-table-view/src/vpu-data-table-view.js
@@ -88,7 +88,7 @@ class DataTableView extends LitElement {
this.table = $(this.shadowRoot.querySelector('table')).DataTable({
destroy: true,
- autoWidth: false,
+ autoWidth: true,
language: lang_obj,
paging: this.paging,
searching: this.searching,
@@ -116,17 +116,14 @@ class DataTableView extends LitElement {
]
});
- try {
- new $.fn.dataTable.Responsive(this.table, {
- details: true
- });
- } catch (e) {
- // XXX: it throws, but it still works
- }
this.data = data;
this.table.clear().rows.add(this.data).draw();
+
+ new $.fn.dataTable.Responsive(this.table, {
+ details: true
+ });
}
update(changedProperties) {
@@ -152,9 +149,14 @@ class DataTableView extends LitElement {
border-radius: var(--vpu-border-radius);
background: transparent;
}
+
.export-btn {
margin-bottom: .6rem;
}
+
+ :host {
+ display: block;
+ }
`;
}
@@ -171,7 +173,7 @@ class DataTableView extends LitElement {
<style>
${this.cssStyle}
</style>
- <div><table></table></div>
+ <div><table width="100%"></table></div>
`;
}
}
--
GitLab