Ng-grid headerRowTemplate hides the dropdown menu

Question

I use the Bootstrap dropdown in the table header, but this is just partially visible.

I found that this is caused ngHeaderContainerusing the CSS property overflow:hidden.

I override this property in my CSS as follows:

.ngHeaderContainer { overflow: visible !important; }

The problem is that my table contains many columns, and you need to use a horizontal scrollbar to view them. When scrolling through the data in the table to the right, the header remains fixed and does not scroll.

I applied several workarounds in which I redefine the property only after focusand rolls back to blur, but that also does not help.

If the data in the table scrolls to the right and I set it ngHeaderContainerto visible, then the header is damaged and we see how and when the data was not scrolled (from the first column).

This will not help if I installed

.ngHeaderCell { overflow: visible !important; }

because it ngHeaderContaineris a parent and does not allow content to be displayed.

Has anyone noticed a similar problem?

Answer 1

I encountered the same problem, .ngHeaderContainer {overflow:hidden}should remain the same in css write

.ngViewport{overflow: auto;}

this worked for me, it will scroll at the bottom of the viewport.