Search code examples
angulardatagridvmware-clarity

style.width.% incorrect on last cell when using clr-datagrid with clrDgRowSelection if browser is not full screen

This is a frustrating one; quite frankly I'm a bit dumbfounded by it

Any thoughts, guidance, suggestions, etc. would be greatly appreciated ... aside from using a completely different datagrid (e.g. NgPrime), I'm not really sure how to move forward with this problem.

I've updated packages today to ensure running the latest release

Angular CLI: 6.2.4
Node: 8.12.0
Clarity: 0.13.3

https://stackblitz.com/edit/clarity-light-theme-v013-1narkk

What I am experiencing locally and when deploying is not exactly the same issue that is seen in the StackBlitz, which is frustrating ...

The StackBlitz shows a problem wherein the last cell's width extends into the previous cell of the same row ... which is also problematic, but it's not exactly the problem that I'm dealing with ...

The only difference left between my env and the StackBlitz is the use of <router-outlet> in the <div class="content-area"> element - not sure whether that would matter ...

FULL SCREEN (last row's width allows the text to stretch out) full screen - rowSelection true

NOT FULL SCREEN (last row's width prematurely wraps the text) NOTE - the cursor changes from 'pointer' back to 'hand' just after the text wraps - so it seems that the row's label element width is incorrect ... not full screen - rowSelection true

It appears that the label class="datagrid-row-clickable" is proportionally limited to the available screen width that is not taken up by the browser (this is just a theory) not full screen - rowSelection true - showing remaining desktop space

Note - this symptom does NOT occur if [clrDgRowSelection]="true" is NOT used on the clr-datagrid - as shown below ... not full screen - no rowSelection used

Could be related to

https://github.com/vmware/clarity/issues/2692

NOTE - removing the [style.width.%]="c.width" reproduces the issues shown in this StackBlitz

https://stackblitz.com/edit/clarity-datagrid-issue-2525-reproduction

Solution

  • Finally determined the issue ...

    When using the ngx-contextmenu - there is a required stylesheet link for bootstrap (seen in its StackBlitz demo)

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    Removing that link tag fixes the behavior I found when the browser was not maximized

    The context menu is no longer styled properly ... but that is not related to VMware's Clarity framework