How would I create a 2-column grid with first column stretching

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:

Screen Shot 2024-05-22 at 1.33.25 PM2242×832 65.9 KB

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') )

image1228×692 23.6 KB

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'
    )
)

Screen Shot 2024-05-22 at 4.02.57 PM2242×1232 181 KB

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

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