Chrome & Firefox Table (selected row) display problem


We have an issue with the way our tables are acting within chrome and firefox. With a datasource that has enough data to require the table to display the vertical scroll bar, the table does not scroll as expected using the arrow keys as the selected row is displayed off screen.

It acts as expected in internet explorer with the selected row always being displayed on the screen but in chrome and firefox it is as though the table has been rendered beyond the screen and therefore the scroll action is not activated. Interestingly the horizontal scroll (using the arrow keys) seems to work as expected.

I’ve tried setting various components heights etc to see if this makes any difference however it unfortunately does not. We have also tried upgrading to the latest cuba version and changing the theme to ‘hover’ but the same issue occurs. We have also tried creating a completely new project with just a simple table and again the same issue occurs.

It appears that it may be a possible rendering bug when using chrome and firefox but any help would be appreciated.

Thanks in advance.


If you are setting selected row programmatically and you are not sure that it will be shown on screen, you can use Table.scrollTo(entity) method. Unfortunately, Table is using lazy loading of rows by design and it cannot be easily changed.

If you are talking about something else, It would be great if you show your problem in a simpler step-by-step way and attach a small demo.

Hi Yuriy

Thanks for your quick response.

It much more simple than programatically implementing a row selection and is just using the default behaviour of the table through an entity combined screen.

Happy to share a project, whats the best way to do this?

Failing that, the a really simple project creates the same problem:

1 Create new project
2 Create entity
3 add at least 1 field
4 create entity combined screen
5 run project (in chrome)
6 add say 20 entity records (enough to make table scroll bar appear)
7 now highlight a row and use the down arrow to go through the table rows. The editor screen on the right changes to the correct entity but once the selected row is below the bottom of the rows displayed on the screen then the table does not automatically scroll to ensure the selected row is always displayed on screen. This works as expected in Internet Explorer.

Thanks in advance.

Thanks, will try to check the use case.

You can upload your project to GitHub or simply create ZIP archive using Build - Zip project menu item of Studio.

There’s a platform-6.10.1 example in below that illustrates the issue of the selected row not being kept in view when scrolling beyond the bottom of the table in Chrome (81.0 KB)


I cannot reproduce this using your project (works OK for Chrome / FF). Is it reproduced for you on another PC? What operating system do you use exactly (Windows version)?

Thank you so much for pointing in the right direction. It was simply that Chrome was on version 69 rather than 70. By hitting the 3 dots on the chrome toolbar, help menu, About Google Chrome, it started an automatic update and the problem resolved itself. The scrollbar nolonger disappears off the bottom of the table and instead stays on the bottom row while the contents of the table move up.

Internet Explorer
This is fine and never had an issue

I’m still getting seeing the same issue on the latest firefox release 63.0. I’ve done a fresh firefox install on both a fully updated Windows 10 pro install and a home install and seeing the issue. It can be seen on the table in the Cuba Sampler \ Table \ Table with generated columns.