Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

New user's guide entry: Scrollable columns

See original GitHub issue

Putting figures or widgets within a scrollable column can be desireable in complex layouts with lots of content. For example it may make sense to have a static header with widgets which stay in view when you scroll down the list of figures they control.

This issue bugged me for a while and when I finally stumbled over the solution in the Google Group, at first it did not work for me. So as suggested by Bryan in that thread, I would like to contribute the working example I saved here to the user’s guide. (Credit goes to the user Noah in the thread for posting the solution my example is based upon.)

Bryan said:

I’m not sure about adding it to examples/app, but this seems like it might be useful information to put into the User’s guide section on layouts, and also linked from the reference guide entry for css_classes. Especially if a standalone (non-server) version can be made? Then we could include the example directly in the User’s Guide itself. I’d suggest a GH issue to discuss further if you are interested in pursing this.

As far as I can tell, it is not possibe to produce a standalone version of this example since index.html has to be modified. So, (how) could the example be integrated? Could it go in the “howto” examples?

Issue Analytics

State:
Created 6 years ago
Reactions:1
Comments:5 (4 by maintainers)

Top GitHub Comments

4reactions

jnettelscommented, Nov 4, 2019

I can’t seem to edit these old posts of mine. I hadn’t realized the link became outdated, so this is the code. I’m just putting this here in case anyone stumbles across this. The issue may stay closed.

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            div.scrollable {
                overflow: auto;
            }
        </style>
        <meta charset="utf-8">
        {{ bokeh_css }}
        {{ bokeh_js }}
    </head>
    <body>
        {{ plot_div|indent(8) }}
        {{ plot_script|indent(8) }}
    </body>
</html>

'''
Modified slider widget example to demonstrate scrollable columns.

We have a widgetbox with some widgets and a grid with two plots. Both elements
will be placed in their own scrollable columns. The plots are arranged in a
grid with a merged toolbar, and we want the toolbar to always stay visible.

To use this example, create a folder 'scroll_test' with the following structure
and paste the two files 'main.py' and 'index.html':

scroll_test
   |
   +---main.py
   +---templates
        +---index.html

Use the ``bokeh serve`` command for the directory application by executing:
    bokeh serve scroll_test
at your command prompt. Then navigate to the URL
    http://localhost:5006/scroll_test
in your browser.

'''
import numpy as np
from bokeh.io import curdoc
from bokeh.layouts import row, widgetbox, column, gridplot, Spacer
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import Slider
from bokeh.plotting import figure


def update_data(attrname, old, new):
    '''Update the data source of the plots'''
    # Get the current slider values
    a = amplitude.value
    b = offset.value
    w = phase.value
    k = freq.value
    # Generate the new curve
    x = np.linspace(0, 4*np.pi, N)
    y = a*np.sin(k*x + w) + b
    z = a*np.cos(k*x + w) + b
    source.data = dict(x=x, y=y, z=z)


# Set up data
N = 200
x = np.linspace(0, 4*np.pi, N)
y = np.sin(x)
z = np.cos(x)
source = ColumnDataSource(data=dict(x=x, y=y, z=z))

# Set up plot
plot1 = figure(plot_height=400, plot_width=400, title="my sine wave",
               tools="crosshair,pan,reset,save,wheel_zoom",
               x_range=[0, 4*np.pi], y_range=[-2.5, 2.5])
plot1.line('x', 'y', source=source, line_width=3, line_alpha=0.6)

plot2 = figure(plot_height=400, plot_width=400, title="my cosine wave",
               tools="crosshair,pan,reset,save,wheel_zoom",
               x_range=[0, 4*np.pi], y_range=[-2.5, 2.5])
plot2.line('x', 'z', source=source, line_width=3, line_alpha=0.6)

# Set up the widgets and connect them to the function 'update_data()'
offset = Slider(title="offset", value=0.0, start=-5.0, end=5.0, step=0.1)
amplitude = Slider(title="amplitude", value=1.0, start=-5.0, end=5.0, step=0.1)
phase = Slider(title="phase", value=0.0, start=0.0, end=2*np.pi)
freq = Slider(title="frequency", value=1.0, start=0.1, end=5.1, step=0.1)
inputs = widgetbox(offset, amplitude, phase, freq)

for w in inputs.children:
    w.on_change('value', update_data)

'''
This is the important part of the example!
We can make the widgetbox scrollable by putting it in a column with an assigned
css_class. That css class name is used again in the index.html file, where an
extra style (overflow: auto) is defined.
We also need to fix the boundaries of this html DIV. The scrollbar appears
when the contents are too large (i.e. an overflow occurs).
'''
col_inputs = column(inputs, sizing_mode='fixed', height=130, width=350,
                    css_classes=['scrollable'])


# Group the plots in a gridplot with a merged toolbar
grid = gridplot([[plot1], [plot2]], toolbar_location='left')
'''
The plots shall become scrollable as well, but we want the ToolbarBox to stay
in place.
The children of 'grid' are the ToolbarBox [0] and a column containing
all the plots [1]. Columns can become scrollable, so we assign this column
the same CSS class 'scrollable' we used before.
'''
grid.children[1].css_classes = ['scrollable']
grid.children[1].sizing_mode = 'fixed'
grid.children[1].height = 400
grid.children[1].width = 500

# Set up layouts and add to document
curdoc().add_root(row(col_inputs, Spacer(width=50), grid))
curdoc().title = "Scrollable Columns"

0reactions

jnettelscommented, Sep 13, 2021

@becker53 Can you provide working example code where the output has the issue you describe (If this is still important to you)? I cannot reproduce your issue.