Highlighting a row in a table works fine in IOS but not in Windows 10

pmcgreal

Hi,
We have an implementation where we present a table of data and based on a specific value in one of the cells we highlight that row.
This works perfectly fine on IOS devices (iPhone, iPad) but on a Windows 10 laptop the highlighting does not occur. The custom code is identical as we are device agnostic.

Any thoughts as to why this might be?
Regards.
Pat

colin

DataTables should be device agnostic too, so something odd going on there. We'd really need to see this in action to be able to diagnose it. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Colin

tangerine

Try adjusting brightness/contrast on the laptop. That fixed a similar problem for me a while ago.

pmcgreal

Hi Tangerine,
I will try that.
One other thing that may be noteworthy @colin. Our application is cross-compiled with Phonegap/Cordova. This way, it looks/behaves more like an installed app. rather than just a website. In addition, there are things that require Cordova which a typical browser would not permit for security reasons.

Pat

pmcgreal

Hi,
Changing the brightness and/or contrast had no impact.
I'll see if I can provide a code snippet that shows how we are attempting to highlight the row.
Pat

pmcgreal

Hi,
The code we are using to build the table and highlight the given row is as follows.
finalHTMLTable += gridRowData.replaceAll('GridRow', dataRow).replaceAll('<tr>', "<tr style ='background-color: rgb(111 241 134 / 40%);'>");

I tested the <tr> style element in an HTML tester which produced data highlighted in green with a 40% reduction in intensity.

Pat

allan

At what point are you running that code? If you are using DataTables you really don't want to be replacing the elements that DataTables is writing into the document. All bets are off as to what would happen at that point - quite possibly what you are seeing!

If you need to add a style to a row that is bring rendered by DataTables, you could use rowCallback.

Allan

pmcgreal

Hi,
This issue has since been resolved as we modified our HTML when we construct the table. It appears that the "/40%" is not supported in Windows.

Pat

allan

Nice one - thanks for letting us know!

Don't we all just love CSS support differences between platforms...

Allan