Ultima 17.0.0: p-table pFrozenColumn has several issues with argb colors

[ThorstenKunz]

When p-datatable-striped is used all even rows have a translucent background so that during horizontal scrolling the non-frozen columns content is not hidden behind the frozen ones but "merge" with the frozen column content.
Same is true for selectable rows and hovered rows when no p-datatable-striped is used but the hover or selection style is applied to a row.

Seems to happen everywhere were the theme uses an argb color effect to apply a darker shade of grey then to simply used a fixed color.

[cetincakiroglu]

Hi,

Could you please share screenshots or screen recordings to demonstrate the issue so we can identify and understand it clearly?

[ThorstenKunz]

Its actually pretty easy to replicate with the Ultima Demo code in the download. Simply add styleClass="p-datatable-striped" to the "Frozen Columns" Table in tabledemo.component.html and it'll look like this:

Same happens when you set [rowHover]="true" instead of the striped table:

It is also true for other effects that use argb translucency to highlight a row like e.g. row selection.

[ThoSap]

@ThorstenKunz then overwrite the default color to a color that does not have an alphachannel in it in the following files:

• src/assets/layout/styles/theme/theme-light/_variables.scss
• src/assets/layout/styles/theme/theme-dark/_variables.scss

For example for the light theme you could use:

$tableBodyRowEvenBg: var(--surface-ground) !default; // --surface-ground variable coming from UltimaNG/PrimeFlex

[ThorstenKunz]

Thanks, but adding a non-alpha $tableBodyRowEvenBg color was unfortunetly not enough. To make it work with hover and select items I added this:

$highlightBg:#E0E0E0 !default;
$tableBodyRowEvenBg:var(--surface-ground) !default;
$tableBodyRowHoverBg:var(--gray-200) !default;

For most cases this seems to work. Of course I haven't been able to see if that may cause sideeffects with other components.
The only scenario where a frozen-column still becomes transparent is related to row selection:

• add p-datatable-striped and single row selection capabilities (selectionMode, [(selection)], etc.) to the Frozen Column example in the Ultima Demo code
• scroll the table horizontally so that there is a cell with content under the a frozen column
• now click on an even row to select it
• (everything should still be ok)
• now click again to unselect the row without the mouse leaving that row
• (everything should still be ok)
• now move the mouse a another row
• (now the formerly selected row will become transparent and the cells under it will shine through again)
• select another row and the frozen columns will become opaque again

I have no idea what style/variable to modify to get this issue fixed.

[ThorstenKunz]

Any chance all this frozen columns mess will get fixed in Ultima 17?

[cetincakiroglu]

@ThorstenKunz

In the near future, Ultima will receive 17.0.0 update. We'll address this issue with it.

[ThoSap]

@cetincakiroglu I've seen that PrimeNG SASS Theme
https://github.com/primefaces/primeng-sass-theme/releases/tag/17.0.0-rc.1
https://github.com/primefaces/primeng-sass-theme/releases/tag/17.0.0
was released yesterday.

Was this issue addressed there and is this the basis for the v17 next-gen templates?

[cetincakiroglu]

Hi,

This issue needs to be fixed by template update. We're working on to update next gen templates to v17 right now and we've fixed the issue. We're planning to deliver v17 update until next week Wednesday.

[ThorstenKunz]

That sounds great. We also found an additional issue with forzen colum headers. They seem to suffer from similar translucency issues than the regular cells.

[cetincakiroglu]

Could you please send a screenshot or screen record, we've recently updated the ultima to v17 and it should fixed the main issue in the topic.

[ThorstenKunz]

So I downloaded ultima-ng-17.0.0.zip and I am not sure what you think you fixed but it certainly wasn't anything related to the issues above. No need to upload new screenshots or recordings because they look exactly the same as the ones I already took:

• adding p-datatable-striped to the table still produces the same issue as shown above
• adding [rowHover]="true" to the table still produces the same issue as shown above
• following the procedure I outlined above for selectItems still produces the same issue as shown above

So from my point of view none of my issues were fixed from v16 to v17.

[ThorstenKunz]

So is anybody actually looking into fixing this?

[cetincakiroglu]

Hi @ThorstenKunz,

Thanks for the feedback we'll try to reproduce the behavior by the steps above.

[cetincakiroglu]

Hi all,

We've investigated the issue and found that a typo causes the issue in 2 scss variables. We've fixed the issue and updated the related variables. We've updated the zip file from the store also, please download the v17.0.0 and try again.

[ThorstenKunz]

@cetincakiroglu So it looks like the issues with p-datatable-striped and [rowHover]="true are fixed. Thanks for that.
But unfortunetly the issue is still there with row selection. You can reproduce it in the Ultima Frozen Column showcase from the download zip:

• add selectionMode="single" [(selection)]="test" to the table in line 149
• add [pSelectableRow]="customer" to the body tr in line 164
• add test: any; to the TableDemoComponent

Now when you select a row the content of the selected row will flow into the frozen rows just as before:

[cetincakiroglu]

Hi,

Thanks for reporting the issue, we'll check other templates with these use cases and fix them if the issue exists. Please let us know if you find any other issue.

[ThorstenKunz]

@cetincakiroglu Are you actually going to fix the row selection bug any time soon?

[cetincakiroglu]

Hi @ThorstenKunz,

This issue caused by appending p-highlight class to the selected row. It reduces the opacity of row's background slightly while giving it primaryColor. p-highlight class is used widely in PrimeNG components. It directly effects all form and menu components. In here, you should override by simply appending a custom color background to the frozen element if it's frozen. In the line 165, if you add any color variable or class you can override it simply and fixes your issue. We cannot interfere this. Some characteristics of the components may not be compatible with each other. In this case, frozenColumn and selection style are incompatible. You can easily solve this by giving an inline conditional class. You can use CSS root variables of Ultima to make it easier, or you can implement custom styling.

[ThorstenKunz]

I don't think "its complicated, we can't fix it" is a good answer. This is a bug in your product because it is breaking advertised functionality so your are supposed to fix it. Or at least add some very clear documentation incl. an example on how to work around this issue so that people know before they buy that this combination of features is not supported.