Clarity: Datagrid: if last column is hidden scrollbar is shown under datagrid

[marvinosswald]

Select one ... (check one with "x")

[x] bug
[ ] feature request
[ ] enhancement

Expected behavior

No scrollbar shown.

Actual behavior

The problem is that if the last column is hidden the column width toggl of the column before is still visible (which is the actual bug) which causes the whole problem. Hard to explain, just see plunker for detail.

Reproduction of behavior

https://plnkr.co/edit/mGTsaVbRLAbpRAxBIJis?p=preview

Environment details

• Angular version: 4.3.1

• Clarity version: 0.10.0-alpha.5

• OS and version: macOS 10.11.6

• Browser: [all, i guess]

[adityarb88]

adding a screenshot in addition to the plnkr provided:

The draggable resize column handle is still visible when the last column is hidden.

[mathisscott]

Investigate and do it if fix is manageable. If not, then we'll move it back to bullpen but ready to fix../

[jeeyun]

Our css selector hides the selector on the last column of a datagrid. In this case, the scrollbar appears because we are still rendering the resize column handle. Though we "hide" the columns, they remain in the dom so the visible column isn't technically the last column.

I investigated possible solutions for this:

• css solution: it isn't possible to use css selectors to find a column that's :last-child and :not(.datagrid-column--hidden)
• I tried refactoring our HideableColumnService to keep track of also the columns that are not hideable. This is needed because a datagrid can have a mixture of columns (both hideable and non-hideable). The idea was that when a column is rendering, it'd ask the service if it was the last visible column in the datagrid and if so, hide the separator. However, we are getting the chocolate error when we dynamically add a column (using *ngIf for example). I suspect that's because a column has rendered with a truth value to show/hide the separator, but something external (in this case the dynamic column) is changing that value before the second check passes.

I had a discussion with the team, and the scope of the fix is bigger than hoped. I'll be moving this back to bullpen for now to be re-evaluated given the notes above.

[dennitsa]

Hello, we are also facing the same issue. I created another plunkr with the issue reproducible here:
https://plnkr.co/dOdp5B

Here is a screenshot too:

Can you please suggest a workaround, while this is being fixed?

[mathisscott]

@jeeyun + @youdz
Any workarounds possible for this issue?

[youdz]

We were not able to find a workaround last time we checked.
Most of our issues came from the fact that CSS doesn't allow you to style an element based on what comes after it, only what comes before it.

And the amount of work required to fix this was surprisingly large, so we didn't prioritize it yet.

[stefnoten]

There is no pure-CSS solution, but our workaround is a custom directive bound on clr-dg-column that toggles a last-visible-column CSS class that hides the separator. It injects the ClrDatagrid and re-evaluates the condition for the CSS class whenever the grid's columns or their hidden state changes:

  get shownColumnChanges$() {
    return this.grid.columns.changes.pipe(
      startWith(null),
      switchMap(() => this.hiddenStateChanges$)
    );
  }

  get hiddenStateChanges$() {
    const hiddenChangePerColumn = this.grid.columns.map(c => {
      return c.hideable
        ? c.hideable.hiddenChangeState
        : NEVER;
    });
    return merge(...hiddenChangePerColumn).pipe(startWith(null));
  }

[KevinWingi]

Any update about this guys?

[KevinWingi]

@stefnoten
Can you pass the implementation link if you can please??

[KevinWingi]

.datagrid-overlay-wrapper{ overflow-x: hidden; }

this can help

[yuezhizizhang]

I’m still able to reproduce it with Angular 8 and Clarity 2.1.1. Is there a simple workaround except than disabling the horizontal scrolling or making the hideable column not the last column?

[gnomeontherun]

This is because we don't correctly show/hide the column resize handle on the last visible column currently. We still need to triage a solution, but our CSS only solution doesn't work because we are only hiding columns and not removing them from the DOM so :last-child doesn't pick up the last visible.

[insyto]

I have a similar problem. My datagrid is inside a card. No hidden column in my case.

I have some custom component in a column (to show different icons based on a state).

It happen to any resolution. I've tried to size the last column with style="width: 44px;" with not success. It is shown on the developer console but the column has another, bigger size.

[insyto]

Ok, found the problem. In my case the problem is the tool tip on the element of the last column.
The tooltip on a column element remain inside the data grid, and if doesn't fit inside it, the scroll bar (horizontal or vertical) are shown.
Here there is a screenshot.

Here you can see the tooltip croped and the scrolbar on the right.
The scrollbar remain even if the tooltip is not shown.