[BUG] Dialog and Datatable don't get along well about bokeh

[jayt9]

Try this:

from random import randint
import numpy as np

from bokeh.layouts import column
from bokeh.models import Button, Dialog, OpenDialog
from bokeh.io import curdoc, output_notebook
from bokeh.models import ColumnDataSource, InlineStyleSheet
from bokeh.models.widgets import DataTable, DateFormatter, TableColumn, Div
from bokeh.plotting import show


show_Dialog = Button(label="Show Dialog")
style = InlineStyleSheet(css="""
:host(.custom_button_1) {
    z-index: 200;
}
""")

dialog = Dialog(
    title="test",
    content=Div(text="test"),
    stylesheets=[style],
    css_classes=['custom_button_1'],
)
show_Dialog.js_on_click(OpenDialog(dialog=dialog))




data = dict(
        dates=[date(2014, 3, i+1) for i in range(10)],
        downloads=[randint(0, 100) for i in range(10)],
    )
source = ColumnDataSource(data)
columns = [
        TableColumn(field="dates", title="Date", formatter=DateFormatter()),
        TableColumn(field="downloads", title="Downloads"),
    ]
data_table = DataTable(source=source, columns=columns, width=400, height=280)



layout = column([
    show_Dialog,
    data_table
])



curdoc().add_root(layout)

Also make sure to import InlineStyleSheet

[mattpap]

This

style = InlineStyleSheet(css="""
:host(.custom_button_1) {
    z-index: 200;
}
""")

will work in some cases due to CSS specificity rules, but it will also break window stacking (z-index is managed by Dialog).

[jayt9]

This

style = InlineStyleSheet(css="""
:host(.custom_button_1) {
    z-index: 200;
}
""")

will work in some cases due to CSS specificity rules, but it will also break window stacking (z-index is managed by Dialog).

Could you explain further? Sorry, I'm very new to coding and thought it's fine because you can close that window to view anything below it.

[mattpap]

Could you explain further? Sorry, I'm very new to coding and thought it's fine because you can close that window to view anything below it.

Dialog sets z-index dynamically, so that it can manage stacking of all dialogs on the page. If you set a fixed z-index value in a stylesheet, then given the current design, that stylesheet takes precedence over what Dialog sets and thus all dialogs will be fixed at a single z-index and their stacking will be defined by the order of rendering. This will work for one dialog and in some cases for multiple, but not in general.