Not sure this is possible.
I would like to create a 2-column grid where one of the two columns is a fixed width (actually based on widest content) and the other column stretches to fill the remainder of the available space (think “stretch_width”).
It felt like GridBox could do it, but I haven’t been able to figure out how to invoke it.
I’d appreciate any pointers.
Thanks!
Would this work for your use case?
import numpy as np
from bokeh.layouts import row
from bokeh.plotting import figure
from bokeh.io import show
p1 = figure(width=200, height=400)
p1.circle(np.random.rand(100), np.random.rand(100))
p2 = figure(sizing_mode='stretch_width', height=400)
p2.circle(np.random.rand(100), np.random.rand(100))
show(row(p1, p2, sizing_mode='stretch_width'))
Here is what it looks like in my jupyter notebook:
Thanks. That works fine, but what I’m really looking for is more of a grid. I’ve tried a number of approaches, but it really doesn’t come out right. The most sane way that I can see to get there is this code, but it only takes up half the browser width. It does react to window size, though.
from bokeh.plotting import figure, show
from bokeh.layouts import row, column, gridplot
from bokeh.models import Div
data = [0, 1, 2, 3]
p = figure(title="Test", height=300, sizing_mode='stretch_width')
p.line(list(range(4)), data)
p2 = figure(title="Test", height=300, sizing_mode='stretch_width')
p2.line(list(range(4)), data)
d = Div(text='This is the side text', width=200)
d2 = Div(text='This is also side text', width=200)
# r1 = row(p, d)
# r2 = row(p2, d2)
# show(column([r1, r2], sizing_mode='stretch_width'))
show( gridplot([[p,d], [p2,d2]], sizing_mode='stretch_width') )
I’m not sure if you can do it with gridplot
but the following code with row
and columns
seems to be what you want, right?
from bokeh.plotting import figure, show
from bokeh.layouts import row, column, gridplot
from bokeh.models import Div
data = [0, 1, 2, 3]
p = figure(title="Test", height=300, sizing_mode='stretch_width')
p.line(list(range(4)), data)
p2 = figure(title="Test", height=300, sizing_mode='stretch_width')
p2.line(list(range(4)), data)
d = Div(text='This is the side text', width=200)
d2 = Div(text='This is also side text', width=200)
show(
column(
row(p, d, sizing_mode='stretch_width'),
row(p2, d2, sizing_mode='stretch_width'),
sizing_mode='stretch_width'
)
)
1 Like
That gets to the problem… Need to specify sizing mode everywhere
Thanks!
from ipywidgets import GridBox, Label, Layout
# Define the content
content1 = Label('Fixed Width Column')
content2 = Label('Stretch Width Column')
# Create a GridBox layout
grid = GridBox(
children=[content1, content2],
layout=Layout(
width='100%',
grid_template_columns='auto 1fr', # auto for fixed width, 1fr for stretching column
display='grid'
)
)
grid