oTree-org / oTree

Python framework for multiplayer decision games, behavioral experiments, and surveys
https://groups.google.com/g/otree
Other
464 stars 199 forks source link

Monitor and Data tables have strange visuals after data updates #76

Open Clashsoft opened 4 years ago

Clashsoft commented 4 years ago

Description

As visible in the screenshot below, cells in the Monitor table have a white background after the data updates that does not play well with the row highlighting on hover.

Screenshot 2020-07-29 at 10 17 42

Probable Cause

Using Inspect Element, it becomes apparent that the animation that makes the cell green for a short time leaves it with a white background:

<td data-field="_round_number" title="1" style="background-color: rgb(255, 255, 255);">2</td>

Proposed Solution

A possible fix could be to use CSS animations instead of updating the background color periodically with JavaScript. That has the additional benefit of a smoother transition.

Additional Info

Another issue that may be related to #75 : the "title" attribute is not properly updated, which causes the tooltips to be different from the actual text (visible in screenshot, round number 1 vs 2).

The same problems occur in the Data table.

oTree-org commented 4 years ago

Thank you very much for the bug report (as well as the other one about the tooltip). I will put these for my next development milestone.