Data Grid Column spacing

Anvil Q&A
1

Hi all

I’m getting to grips with Data Grids. Very useful, with some difficulties surrounding spacing and wrapping etc. I found the very helpful ‘text-wrap’ CSS role which is working great (I apply it if any words are longer than 6 letters).

But the spacing between each column in the repeating panel in the Data Grid remains obstinately large which is wasting valuable screen space. I tried:

.anvil-role-rep-panel-tight .col-panel {
margin-right: -60px !important;
margin-left: -60px !important;
}

in the theme.css doc, added the role of course and applied it, but no difference. I guess the “.col-panel” must change to something else?

See pic…

Thanks in advance,
B

Screen Shot 2021-01-28 at 14.32.13
Screen Shot 2021-01-28 at 14.32.13983×95 9.93 KB

2

could you share a clone link? - css is easier play with when there’s a clone link to work off

1 Like
3

https://anvil.works/build#clone:TQBLAVFQPCND7C5P=4T3ARTQFUNA2UDVPPDHZT67A

4

perfect - thanks for the clone
It was the padding you needed to change rather than the margin.

/*theme.css*/
.anvil-data-row-panel>.data-row-col {
    padding: 0px 1px; /*top padding, side padding (adjust as needed)*/
}

the default padding is 0px 7px

5

Beautiful thanks @stucork.

One more question. I had thought of doing several DataGrids in a flovwpanel to accomplish the same table on a mobile screen (ie splitting that table into 4 sections). But it strikes me as much simpler to let it horizontally scroll if the screen width is less than, say, 700px. I already know how to get the screen width (you’d have seen that in the app, but is there a way to let that exact table both keep its nice readable width and horizontally scroll for a narrow screen ?

Thanks again
Bruce

6

sure
what about this

.anvil-data-grid {
    overflow-x: scroll;
}
.anvil-data-grid > div {
    min-width: 700px;
}

also worth noting you can get the window width in python

js

  function calculatePageWidth() {
    var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    return(w);
  }

py

self.label_1.text = get_open_form().call_js('calculatePageWidth')

becomes

from anvil.js.window import window, document
self.label_1.text = window.innerWidth or \
                    document.documentElement.clientWidth or \
                    document.body.clientWidth
2 Likes