Clarity: Datagrid: Various popovers get cut off depending on datagrid size and placement

[hippee-lee]

Describe the bug

This is a list of datagrid issues related to the lack of smart popovers in the datagrid:

1. Filters: When the datagrid is to short, the filter popover overflows with the rest of the header/table content underneath the footer. This can be worked around by setting a min height on the datagrid.
2. Hideable Column Toggle: Depending on the height of the datagrid, the list of hideable columns can be shown above the fold
3. signposts / tooltips in rows can be clipped depending on the location and need to be manually set by the consumer to ensure onscreen and visible placement.

Expected behavior

After development of https://github.com/vmware/clarity/issues/1262#issuecomment-320699953 the issues with these popovers in datagrid should not occur.

[amellnik]

One other issue that may already be solved: opening a filter on the first column can fall off the screen if the column is narrow.

Edit: I see that this issue is already tracked in #1262

[hippee-lee]

Hey Alex, I don't think the issue you describe is already fixed. But, it should be fixed once I develop the fix for this issue.

[sdurnov]

@hippee-lee do you have it planned for release anytime soon?

[hippee-lee]

Hi @sdurnov - I have one more item that needs to be done for the upcoming v1.0 release and then I will start on the smart popover enhancement that will address these issues.

I hope to start on it by end of this week or early next week.

[JoshuaNitschke]

I'm still seeing this in the 1.0 beta with a custom filter. I didn't notice a problem in 13.7, but it could have been i never did a search with only one result.

[hippee-lee]

Hey @JoshuaNitschke - thats one of the things the smart popover fix needs to address. For now, your best bet is to set a min height on the datagrid so that the filter popover doesn't overflow.

[sdurnov]

@hippee-lee but that won't help with 1st columns filter popup. Btw, this issue is for 2.0 now? Meaning it is planned to be released in half a year? This is bad news :(

[BramMeerten]

1. Filters: When the datagrid is to short, the filter popover overflows with the rest of the header/table content underneath the footer. This can be worked around by setting a min height on the datagrid.

I don't agree this should be part of an enhancement ticket. I think it should be a bug because it worked in the previous version. You can test this in the Custom Filtering documentation page of v.0.13:
https://vmware.github.io/clarity/documentation/v0.13/datagrid/custom-filtering

The workaround of setting a min-height is not a feasible option for us, because we have filters that contain a datepicker. This means that we'd need a min-height of about 400px.

But another workaround is to set the overflow of the datagrid to visible:

.datagrid {
   overflow: visible;
}

[hippee-lee]

If any of the columns have been widened then the .datagrid element will be wider than its container (.datagrid-host). Setting overflow: visible will show the columns outside of the host container.

[jkjha]

1. Filters: When the datagrid is to short, the filter popover overflows with the rest of the header/table content underneath the footer. This can be worked around by setting a min height on the datagrid.

I don't agree this should be part of an enhancement ticket. I think it should be a bug because it worked in the previous version. You can test this in the Custom Filtering documentation page of v.0.13:
https://vmware.github.io/clarity/documentation/v0.13/datagrid/custom-filtering

The workaround of setting a min-height is not a feasible option for us, because we have filters that contain a datepicker. This means that we'd need a min-height of about 400px.

But another workaround is to set the overflow of the datagrid to visible:

.datagrid {
   overflow: visible;
}

This breaks lot of other things in grid. Like no scrolling.

[hippee-lee]

@jkjha - whatever we call it, the fix for this issue is #2923 which I am working on right now.
I have a prototype that mostly works but I need to refactor a few things, clean up the solution so its ready for production and write the tests. I expect to update the pull request for smart popovers soon.

[hachadwick]

this was nearly three months ago. has there been any updates on this?

[hippee-lee]

@hachadwick please follow #3374 for the updates

[windsonic]

We're having same problem in Clarity v1.1.0 and here's our workaround fix:

_Update on July 4, 2019:
We have to remove the overflow style set on clr-datagrid since this will still cover the filter popups. After removing this, the filter popups and row action popups are now working as expected. The only thing is that the datagrid columns will exceeds its boundary if its width is smaller than the value set in ClrDgMinWidth directive. But comparing to these problems, we think the problem that the popups are hidden is more serious. Also since we already set the min width of the datagrid so even it's a 10-column datagrid, it's min width will be 1000px which will be enough on desktops/laptops and most of tablet devices. To be responsive for even smaller screens, we'll come up with the solution that will hide some less important columns, maybe just display 1 or 2 most important columns for small screens._
```// Fixed the horizontal scrolling problem of datagrid

clr-datagrid {
overflow: auto; // This is NOT ok and will still cover the filter popups (Updated on July 4, 2019)
}

// To make sure the filter can be fully displayed
.datagrid {
overflow: visible;
}

.datagrid-table {
position: static;
}

// Also we added a directive to calculate min width of datagrid:
@Directive({
selector: 'clr-datagrid',
})
export class ClrDgMinWidth implements AfertViewInit {
constructor (
@Self() private readonly clrDatagrid: ClrDatagrid,
private readonly elRef: ElementRef,
private readonly renderer: Renderer2,
) { }

ngAfterViewInit () {
const columns = this.clrDatagrid.columns.toArray();
const minWidth = columns.length * 100;
[ '.datagrid', '.datagrid-footer' ].map( selector =>
this.elRef.nativeElement.querySelector(selector),
)
.filter(el => !!el)
.forEach(el => this.renderer.setStyle(el, 'min-widht', ${minWidth}px);
}
}

[Jinnie]

@windsonic is it working as you expect it to do? I see you are setting 'min-widht' on the last line

[windsonic]

@windsonic is it working as you expect it to do? I see you are setting 'min-widht' on the last line

Hi Jinnie, I updated my comments. Please take a look.

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.