diff --git a/src/bonsai/bonsai/bim/data/webui/static/css/index.css b/src/bonsai/bonsai/bim/data/webui/static/css/index.css index c7429d5d84..02cb6cf3e4 100644 --- a/src/bonsai/bonsai/bim/data/webui/static/css/index.css +++ b/src/bonsai/bonsai/bim/data/webui/static/css/index.css @@ -57,11 +57,9 @@ body { } #container { + position: relative; + padding: var(--margin-small); flex: 1; - margin-top: var(--margin-medium); - margin-left: var(--margin-small); - margin-right: var(--margin-small); - margin-bottom: var(--margin-medium); } h3 { @@ -204,7 +202,11 @@ footer p { } .table-container { - margin-bottom: var(--margin-large); + position: absolute; + display: block; + height: calc(100% - var(--margin-small) * 2); + width: calc(100% - var(--margin-small) * 2); + overflow-x: scroll; } .csv-table { @@ -297,4 +299,4 @@ button:hover { .tabulator-menu-item:hover { filter: brightness(1.4); -} \ No newline at end of file +} diff --git a/src/bonsai/bonsai/bim/data/webui/static/js/index.js b/src/bonsai/bonsai/bim/data/webui/static/js/index.js index fafd1e3616..8b84f61912 100644 --- a/src/bonsai/bonsai/bim/data/webui/static/js/index.js +++ b/src/bonsai/bonsai/bim/data/webui/static/js/index.js @@ -206,16 +206,19 @@ function addTableElement(blenderId, csvData, filename) { return menu; } + var containerHeight=$('.table-container').height(); + var h3Height=$('.table-container>h3').height(); var table = new Tabulator("#table-" + blenderId, { placeholder: "No data to display", - height: "400px", resizableColumnGuide: true, index: "GlobalId", data: csvData, importFormat: "csv", autoColumns: true, selectableRows: 1, - layout: "fitColumns", + layout: "fitDataFill", + height: containerHeight - h3Height - 20 + "px", + movableColumns: true, // Our fields are never nested, and we use the "." character in queries nestedFieldSeparator: false, autoColumnsDefinitions: function (definitions) {