Archived discussions · Captured October 28, 2026

Widget `height` parameter not having the same effect as `width`

joelostblomDec 24, 2018 #1

First, thanks so much for the hard work put into improving bokeh! I was struggling when I initially used it (I think around 0.10), but I recently returned to it and I am
having an overall great experience now (both with the cleaner api and
improved docs)! Thank you!

I am currently trying to figure out how to change the height of widgets. I can
resize the width of a widget, such as a Toogle button, by simply including the
width parameter.


from bokeh.io import show
from bokeh.layouts import widgetbox
from bokeh.models.widgets import Toggle
toggle = Toggle(label="Foo", button_type="success", width=500)
show(widgetbox(toggle))

Unintuitively, trying the use the height parameter to change the height of
the widget, does not have the same effect (at least not visually). Instead of
resizing the toggle button, the surrounding box is resized (can be seen while
inspecting or because other UI elements in layouts are pushed downwards).

Initially, I thought this was an issue with the resizing policy of the toggle
button, preventing it from expanding into the surrounding area, but when
I tried changing it to either ‘stretch_both’, ‘scale_height’, or ‘fixed’,
there was no change (I specified it in both the call to Toggle and widgetbox).

Maybe I am missing something obvious here, but how am I supposed to change the
height of widgets in general (For MultiSelect there is the convenient .size
method, but it does not generalize)? Do I need to use custom css or is
there another way?

⌁ Link to post

BryanDec 24, 2018 #2

Hi,

There many problems with existing layout, and there is currently a very large PR that closes more than a dozen open layout-related issues:

Improve the layout subsystem by mattpap · Pull Request #8085 · bokeh/bokeh · GitHub

If you have the ability, I'd suggest building and trying out the PR locally (more feedback from more people would be valuable). Otherwise it will be merged soon and more easily available in dev builds shortly after that.

Thanks,

Bryan

···

On Dec 24, 2018, at 05:33, Joel <joel.ostblom@gmail.com> wrote:

First, thanks so much for the hard work put into improving bokeh! I was struggling when I initially used it (I think around 0.10), but I recently returned to it and I am having an overall great experience now (both with the cleaner api and improved docs)! Thank you!

I am currently trying to figure out how to change the height of widgets. I can resize the width of a widget, such as a Toogle button, by simply including the width parameter.

from bokeh.io import show
from bokeh.layouts import widgetbox
from bokeh.models.widgets import Toggle

toggle = Toggle(label="Foo", button_type="success", width=500)
show(widgetbox(toggle))

Unintuitively, trying the use the height parameter to change the height of the widget, does not have the same effect (at least not visually). Instead of resizing the toggle button, the surrounding box is resized (can be seen while inspecting or because other UI elements in layouts are pushed downwards).

Initially, I thought this was an issue with the resizing policy of the toggle button, preventing it from expanding into the surrounding area, but when I tried changing it to either ‘stretch_both’, ‘scale_height’, or ‘fixed’, there was no change (I specified it in both the call to Toggle and widgetbox).

Maybe I am missing something obvious here, but how am I supposed to change the height of widgets in general (For MultiSelect there is the convenient .size method, but it does not generalize)? Do I need to use custom css or is there another way?

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+unsubscribe@continuum.io.
To post to this group, send email to bokeh@continuum.io.
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/1480541b-7ca1-44e3-aef3-37cb6a24e039%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

⌁ Link to post

joelostblomDec 25, 2018 #3

Thank you for the reply Bryan,

I just tried with the PR you mentioned (bokeh.__version__ = 1.0.2-148-gd93c528ec), but the behavior remains the same as described in my original post. Is this considered a bug? Should I post this as a new issue on the tracker?

···

On Monday, December 24, 2018 at 7:08:56 PM UTC+1, Bryan Van de ven wrote:

Hi,

There many problems with existing layout, and there is currently a very large PR that closes more than a dozen open layout-related issues:
    [https://github.com/bokeh/bokeh/pull/8085](https://github.com/bokeh/bokeh/pull/8085)
If you have the ability, I’d suggest building and trying out the PR locally (more feedback from more people would be valuable). Otherwise it will be merged soon and more easily available in dev builds shortly after that.

Thanks,

Bryan

On Dec 24, 2018, at 05:33, Joel joel.o...@gmail.com wrote:

First, thanks so much for the hard work put into improving bokeh! I was struggling when I initially used it (I think around 0.10), but I recently returned to it and I am having an overall great experience now (both with the cleaner api and improved docs)! Thank you!

I am currently trying to figure out how to change the height of widgets. I can resize the width of a widget, such as a Toogle button, by simply including the width parameter.

from bokeh.io import show

from bokeh.layouts import widgetbox

from bokeh.models.widgets import Toggle

toggle = Toggle(label=“Foo”, button_type=“success”, width=500)

show(widgetbox(toggle))

Unintuitively, trying the use the height parameter to change the height of the widget, does not have the same effect (at least not visually). Instead of resizing the toggle button, the surrounding box is resized (can be seen while inspecting or because other UI elements in layouts are pushed downwards).

Initially, I thought this was an issue with the resizing policy of the toggle button, preventing it from expanding into the surrounding area, but when I tried changing it to either ‘stretch_both’, ‘scale_height’, or ‘fixed’, there was no change (I specified it in both the call to Toggle and widgetbox).

Maybe I am missing something obvious here, but how am I supposed to change the height of widgets in general (For MultiSelect there is the convenient .size method, but it does not generalize)? Do I need to use custom css or is there another way?

–
You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+un...@continuum.io.

To post to this group, send email to bo...@continuum.io.

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/1480541b-7ca1-44e3-aef3-37cb6a24e039%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

⌁ Link to post

BryanDec 26, 2018 #4

Hi Joel,

Frist, just to be sure: You built BokehJS locally following the Dev Guide "Getting Set Up" instructions, and then ran your code with this local version (e.g. by setting "BOKEH_RESOURCES=inline")?

Thanks,

Bryan

···

On Dec 25, 2018, at 13:25, Joel <joel.ostblom@gmail.com> wrote:

Thank you for the reply Bryan,

I just tried with the PR you mentioned (bokeh.__version__ = 1.0.2-148-gd93c528ec), but the behavior remains the same as described in my original post. Is this considered a bug? Should I post this as a new issue on the tracker?

On Monday, December 24, 2018 at 7:08:56 PM UTC+1, Bryan Van de ven wrote:
Hi,

There many problems with existing layout, and there is currently a very large PR that closes more than a dozen open layout-related issues:

Improve the layout subsystem by mattpap · Pull Request #8085 · bokeh/bokeh · GitHub

If you have the ability, I'd suggest building and trying out the PR locally (more feedback from more people would be valuable). Otherwise it will be merged soon and more easily available in dev builds shortly after that.

Thanks,

Bryan

> On Dec 24, 2018, at 05:33, Joel <joel.o...@gmail.com> wrote:
>
> First, thanks so much for the hard work put into improving bokeh! I was struggling when I initially used it (I think around 0.10), but I recently returned to it and I am having an overall great experience now (both with the cleaner api and improved docs)! Thank you!
>
> I am currently trying to figure out how to change the height of widgets. I can resize the width of a widget, such as a Toogle button, by simply including the width parameter.
>
> from bokeh.io import show
> from bokeh.layouts import widgetbox
> from bokeh.models.widgets import Toggle
>
> toggle = Toggle(label="Foo", button_type="success", width=500)
> show(widgetbox(toggle))
>
> Unintuitively, trying the use the height parameter to change the height of the widget, does not have the same effect (at least not visually). Instead of resizing the toggle button, the surrounding box is resized (can be seen while inspecting or because other UI elements in layouts are pushed downwards).
>
> Initially, I thought this was an issue with the resizing policy of the toggle button, preventing it from expanding into the surrounding area, but when I tried changing it to either ‘stretch_both’, ‘scale_height’, or ‘fixed’, there was no change (I specified it in both the call to Toggle and widgetbox).
>
> Maybe I am missing something obvious here, but how am I supposed to change the height of widgets in general (For MultiSelect there is the convenient .size method, but it does not generalize)? Do I need to use custom css or is there another way?
>
>
> --
> You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+un...@continuum.io.
> To post to this group, send email to bo...@continuum.io.
> To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/1480541b-7ca1-44e3-aef3-37cb6a24e039%40continuum.io\.
> For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+unsubscribe@continuum.io.
To post to this group, send email to bokeh@continuum.io.
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/04703540-24fa-4f6e-a363-7912c630e3e3%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

⌁ Link to post

joelostblomDec 26, 2018 #5

Yes, I did the following:

conda create -n bk-layout-pr bokeh
conda uninstall bokeh # I only wanted conda to install the dependencies
git clone https://github.com/bokeh/bokeh.git
conda config --append channels bokeh
conda config --append channels conda-forge
conda install jinja2 pyyaml
conda install `python scripts/deps.py build run test`
git checkout --track origin/mattpap/8084_layout
python setup.py develop

I selected 1) build and install fresh BokehJS after the last step.

The examples run fine and this is the output from python -m bokeh info

Python version : 3.7.1 (default, Dec 14 2018, 19:28:38) IPython version : 7.2.0
Tornado version : 5.1.1
Bokeh version : 1.0.2-22-g0ea25b011-dirty
BokehJS static path : /home/joel/stuffandthings/others-packages/bokeh/bokeh/server/static
node.js version : v10.13.0
npm version : 6.4.1

I run my code from the root git directory (“bokeh”) like this BOKEH_RESOURCES=inline python examples/plotting/file/test.py

⌁ Link to post

BryanDec 27, 2018 #6

Hi Joel,

OK, just needed to make sure we were on the same page. Can you leave a comment on the PR:

Improve the layout subsystem by mattpap · Pull Request #8085 · bokeh/bokeh · GitHub

*extremely* preferably with a minimal reproducing script linked in a gist or repo.

Thanks,

Bryan

···

On Dec 26, 2018, at 13:09, Joel <joel.ostblom@gmail.com> wrote:

Yes, I did the following:

conda create -n bk-layout-pr bokeh
conda uninstall bokeh # I only wanted conda to install the dependencies
git clone GitHub - bokeh/bokeh: Interactive Data Visualization in the browser, from Python
conda config --append channels bokeh
conda config --append channels conda-forge
conda install jinja2 pyyaml
conda install `python scripts/deps.py build run test`
git checkout --track origin/mattpap/8084_layout
python setup.py develop

I selected 1) build and install fresh BokehJS after the last step.

The examples run fine and this is the output from python -m bokeh info

Python version : 3.7.1 (default, Dec 14 2018, 19:28:38)
IPython version : 7.2.0
Tornado version : 5.1.1
Bokeh version : 1.0.2-22-g0ea25b011-dirty
BokehJS static path : /home/joel/stuffandthings/others-packages/bokeh/bokeh/server/static
node.js version : v10.13.0
npm version : 6.4.1

I run my code from the root git directory (“bokeh”) like this BOKEH_RESOURCES=inline python examples/plotting/file/test.py

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+unsubscribe@continuum.io.
To post to this group, send email to bokeh@continuum.io.
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/dca6d223-d5c5-4580-9c42-f1815993e7ac%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

⌁ Link to post

joelostblomDec 28, 2018 #7

Sorry Bryan, I just realized that I forgot to test the different sizing modes
when using BOKEH_RESOURCES=inline. I ran the code again and I am able to
resize the button height if I use sizing_mode='fixed'. However, only width
resizes with the default sizing mode None. Below is a summary of the
behavior with different sizing modes.

None or 'scale_width': The grey background box’s width and height is
resized. Only the width of the green button is resized.

'fixed': The green button’s width and height are resized (I can’t see the
background box since the green button covers it).

'stretch_both', 'scale_both', or 'scale_height': The grey background
box’s width is resized, its height is resized to now stretch down the entire page. Only the
width of the green button is resized.

I find it confusing that the default sizing mode (None) resizes
width, but not height. Can I leave a comment regarding this on the PR or is
already a known issue or intended behavior?

⌁ Link to post

BryanDec 28, 2018 #8

Joel,

It's a large PR and I am not in the lead on it, so I would recommend commenting/questioning there. That said, I don't think I would would want buttons to resized their height by default (but I might be misunderstanding you).

Thanks,

Bryan

···

On Dec 27, 2018, at 16:07, Joel <joel.ostblom@gmail.com> wrote:

Sorry Bryan, I just realized that I forgot to test the different sizing modes when using BOKEH_RESOURCES=inline. I ran the code again and I am able to resize the button height if I use sizing_mode='fixed'. However, only width resizes with the default sizing mode None. Below is a summary of the behavior with different sizing modes.

None or 'scale_width': The grey background box’s width and height is resized. Only the width of the green button is resized.

'fixed': The green button’s width and height are resized (I can’t see the background box since the green button covers it).

'stretch_both', 'scale_both', or 'scale_height': The grey background box’s width is resized, its height is resized to now stretch down the entire page. Only the width of the green button is resized.

I find it confusing that the default sizing mode (None) resizes width, but not height. Can I leave a comment regarding this on the PR or is already a known issue or intended behavior?

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+unsubscribe@continuum.io.
To post to this group, send email to bokeh@continuum.io.
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/ddd5e048-6050-41e3-aa87-1bc42379062c%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

⌁ Link to post

Mateusz_Paprocki2Dec 28, 2018 #9

Hi,

Sorry Bryan, I just realized that I forgot to test the different sizing modes
when using BOKEH_RESOURCES=inline. I ran the code again and I am able to
resize the button height if I use sizing_mode='fixed'. However, only width
resizes with the default sizing mode None. Below is a summary of the
behavior with different sizing modes.

None or 'scale_width': The grey background box’s width and height is
resized. Only the width of the green button is resized.

'fixed': The green button’s width and height are resized (I can’t see the
background box since the green button covers it).

'stretch_both', 'scale_both', or 'scale_height': The grey background
box’s width is resized, its height is resized to now stretch down the entire page. Only the
width of the green button is resized.

I find it confusing that the default sizing mode (None) resizes
width, but not height. Can I leave a comment regarding this on the PR or is
already a known issue or intended behavior?

it’s a bug. The default sizing mode (None) means that button will be sized according to preferred width/height if provided, or to its contents computed based on button’s HTML and CSS. By default buttons have preferred width (300px) but not height.

Mateusz

···

On Fri, Dec 28, 2018 at 1:07 AM Joel joel.ostblom@gmail.com wrote:

–

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+unsubscribe@continuum.io.

To post to this group, send email to bokeh@continuum.io.

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/ddd5e048-6050-41e3-aa87-1bc42379062c%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

⌁ Link to post

joelostblomDec 28, 2018 #10

Thanks for explaining Mateusz. Is this already being tracked or do you want me to open a new GitHub issue?

···

On Friday, December 28, 2018 at 1:19:10 AM UTC+1, mateusz.paprocki wrote:

Hi,

On Fri, Dec 28, 2018 at 1:07 AM Joel joel.o...@gmail.com wrote:

Sorry Bryan, I just realized that I forgot to test the different sizing modes
when using BOKEH_RESOURCES=inline. I ran the code again and I am able to
resize the button height if I use sizing_mode='fixed'. However, only width
resizes with the default sizing mode None. Below is a summary of the
behavior with different sizing modes.

None or 'scale_width': The grey background box’s width and height is
resized. Only the width of the green button is resized.

'fixed': The green button’s width and height are resized (I can’t see the
background box since the green button covers it).

'stretch_both', 'scale_both', or 'scale_height': The grey background
box’s width is resized, its height is resized to now stretch down the entire page. Only the
width of the green button is resized.

I find it confusing that the default sizing mode (None) resizes
width, but not height. Can I leave a comment regarding this on the PR or is
already a known issue or intended behavior?

it’s a bug. The default sizing mode (None) means that button will be sized according to preferred width/height if provided, or to its contents computed based on button’s HTML and CSS. By default buttons have preferred width (300px) but not height.

Mateusz

–

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+un...@continuum.io.

To post to this group, send email to bo...@continuum.io.

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/ddd5e048-6050-41e3-aa87-1bc42379062c%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

⌁ Link to post

systemJul 21, 2021 #11

⌁ Link to post

End of archived discussion · Replies are disabled