Align RadioButtonGroup

Hi,

The code below provides this output:

Is it possible to align the RadioButtonGroup to be at the same place as Text_Input?

# Create Input controls

from bokeh.models import RadioButtonGroup
from bokeh.plotting import column, show, row
from bokeh.io import push_notebook, show, output_notebook
output_notebook()

#text_input.js_on_change("value", CustomJS(code="""
#    console.log('text_input: value=' + this.value, this.toString())
#"""))

LABELS = ["Psi", "Bar", "Kpia"]
#pressure_checkbox = RadioGroup(labels=LABELS)
pressure_checkbox = RadioButtonGroup(labels=LABELS, active=0)
Well_Pressure = TextInput(title="Well Pressure: ", value = '200')

LABELS = ["m3/h", "m3/d", "bbl/d"]
flowrate_checkbox = RadioButtonGroup(labels=LABELS, active=0)
flowrate = TextInput(title="Flow Rate [m3/h]: ", value = '5000')

LABELS = ["degF", "degC", "Kelvin"]
temperature_checkbox = RadioButtonGroup(labels=LABELS, active=0)
Well_temp = TextInput(title="Well Temperature: ", value = '70')

layout = column(row(Well_Pressure, pressure_checkbox), 
                row(flowrate, flowrate_checkbox), 
                row(Well_temp, temperature_checkbox))
show(layout)

Hey,

one solution is to add a margin to the RadioButtonGroup.

pressure_checkbox = RadioButtonGroup(labels=LABELS, active=0, margin=(25, 5, 5, 5))

The margin defines [top, right, bottom, left]. The default is (5,5,5,5).
I hope that helps you.
Cheers,
Niko

The issue is that widgets are centered in their enclosing elements by default. In this case the input widget includes a title, so that creates extra vertical space for the radio boxes to be centered inside. Using the margin is a good choice to override the default in this case.

Another option might be to skip the titles on the individual inputs, and instead put each row of input and radiobuttons inside the new GroupBox that was announced in Bokeh 3.0 (untested idea).

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