DataTable scrolls to the top when inside an iframe on Firefox

When I select a row in a DataTable that is inside an iframe, the whole frame scrolls to the top of the datatable. This is very jarring - especially if the DataTable is long - and I want to disable it. Happens always in Firefox and sometimes in Chrome.

Lightly modified DataTable code from documentation example (increasing the number of rows makes the effect easier to see)

from datetime import date
from random import randint

from bokeh.io import show
from bokeh.models import ColumnDataSource, DataTable, DateFormatter, TableColumn

N = 28
data = dict(
        dates=[date(2014, 3, i+1) for i in range(N)],
        downloads=[randint(0, 100) for i in range(N)],
    )
source = ColumnDataSource(data)

columns = [
        TableColumn(field="dates", title="Date", formatter=DateFormatter()),
        TableColumn(field="downloads", title="Downloads"),
    ]
data_table = DataTable(source=source, columns=columns,  height=N*28,
                                     scroll_to_selection=False,
                                     sizing_mode='stretch_width',)
# Stretch width just so the table is easier to see.
# Scroll to selection true vs false has no effect.

save(data_table, title='test', filename='testtable.html')

Now embed it in an iframe (again 900px just makes this easier to see)
<iframe src="testtable.html" style="width:100%;height:900px;"></iframe>

Gif demo

The code above behaves as expected (no scroll) for me on Chrome and FF on OSX with Bokeh 3.2. you will need to provide more details: platform, OS, all relevant software versions, etc. It is advised to always include this information in any OSS support questions.

Bokeh 3.2.1
Firefox 116.0.2
MacOS 13.5

You might have to scroll a bit so the table header is not visible. Then when you click a row it will jump up

Right, I did that, and did not see any jump or scroll. This laptop is still 13.4.1 with Firefox 116.0.2, I don’t have a 13.5 machine to test with. I’m not sure what else could be different offhand.

I updated to 13.5 and still cannot reproduce any issue with the code above, unfortunately.

Tried it in safe mode in firefox still trips up for me. But I have figured out a consistent way to reproduce it. Serve the bokeh datatable from a different origin (I have uploaded the example above to https://testtable.pages.dev/testtable)

On the url above there is no jumping but if you create a simple webpage like below you will see the jumping on Mozilla 116.0.2 and Chrome 115. No jumping on Safari 16

<iframe src="https://testtable.pages.dev/testtable" style="width:100%;height:900px;"></iframe>

I guess it must be something specific to do with iframes. I don’t have any suggestions or workarounds, all I can suggest is that you open a GitHub Issue with full details.

Did some more digging, bk-data-table has two empty divs with tabindex="0" (first and last)

image1960×336 105 KB

Deleting the second tabindex fixes the problem. Accessibility engineering is way outside my wheelhouse so I am not sure if this breaks something.

image1736×290 94.2 KB

will type this up and put it on github in a bit

Github issue [BUG] Cross origin iframe jumps when a DataTable row is selected · Issue #13320 · bokeh/bokeh · GitHub

For posterity, a band-aid fix is to add .bk-data-table > div:nth-child(8) { display: none; } to the datatable stylesheet

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.