Pivot table causing all data-grids with the role of 'wide' to stop functioning correctly

[NicoNiehaus]

Hi All, recently started using anvil extras and wow, great job. I've run in to a problem.

I have a couple of data-grids in my app that have many columns (15+) so they are too wide to show on a single screen. I therefore, assign the role of 'wide' to these tables with the role defined in my css as shown below:

/* 
horizontal scrolling
*/
.anvil-role-wide .data-grid-child-panel {
  overflow-x: auto;
}

.anvil-role-wide .anvil-data-row-panel {
  flex-wrap: nowrap;
  min-width: -moz-min-content;
  min-width: min-content;
}

This has always worked perfectly, and allows me to scroll horizontally on these large datagrids. However, if I import the following:

from anvil_extras.Pivot import Pivot

Then the role of 'wide' no longer functions correctly. I assume it's because something in the Pivot class messes with the data-grid roles.

I changed the name of the role from 'wide' to 'wide-grid' to see if that could solve the problem, but that didn't help. Anyone else encounter this issue and can perhaps share a solution?

Here is a demo app showing the problem. If you comment out the import Pivot line, then the datagrid functions as I expect it too. However, if you import Pivot, then the scrolling no longer works.
https://anvil.works/build#clone:OXFZWI7JVNQRI2ND=LQGVPXYSAUNJ3PTJSJND2NA7

Thanks, Nico

[s-cork]

that is annoying.
Thanks for the clone

The issue is in the Pivot Form on line 30

anvil-extras/client_code/Pivot/__init__.py

Lines 27 to 30 in 6500f9f

	helpers._html_injector.css(
	""".anvil-container-overflow, .anvil-panel-col {
	overflow: visible;
	}

Without that line the pivot dropdowns wouldn't be visible

I get around this in popovers by rendering the popovers onto the document.body element
But there's no obvious hook into the pivot API to tell it where to render the drop downs
And anvil ColumnPanels are quite opinionated about overflow

So I don't really have an obvious solution here.
But I agree it is a problem

[NicoNiehaus]

Thanks for the reply.

Do you think a possible workaround might be to create a completely separate app with the Pivot table, and show the app in an IFrame within my main app? That way I won't be importing Pivot into the main app with the 'wide' tables.

[s-cork]

sure worth a try

[NicoNiehaus]

Just an update, so it works if I display the pivot table in an IFrame from a separate app. Obviously it doesn't look as nice as if it was in the same app and it's a bit more effort to transfer data and results between the main app and the embedded app, but until this is fixed, at least it's a work-around.