How to set horizontal space between two Buttons with custom width?

How do I set the horizonal space between two Buttons with custom width in the same row?

The following code illustrates my problem:

from bokeh.models.widgets import Button
from bokeh.io import curdoc
from bokeh.layouts import row, column

btn1 = Button(label="A", width=280, height=10)
btn2 = Button(label="B", width=280, height=10)

btn3 = Button(label="C")
btn4 = Button(label="D")

curdoc().add_root(column(row(btn1, btn2),
                    row(btn3, btn4)))



This code outputs the following page:




As you can see buttons C and D have a space between them, however buttons A and B do not.
How do I make room when setting the button width?

I tried to change the height of the buttons (suggested by this [past message](https://groups.google.com/a/continuum.io/forum/#!topic/bokeh/487aN2ahmZ8)) but nothing changed.

This correspondence (including any attachments) is for the intended recipient(s) only. It may contain confidential or privileged information or both. No confidentiality or privilege is waived or lost by any mis-transmission. If you receive this correspondence by mistake, please contact the sender immediately, delete this correspondence (and all attachments) and destroy any hard copies. You must not use, disclose, copy, distribute or rely on any part of this correspondence (including any attachments) if you are not the intended recipient(s).本メッセージに記載および添付されている情報(以下、総称して「本情報」といいます。)は、本来の受信者による使用のみを意図しています。誤送信等により本情報を取得された場合でも、本情報に係る秘密、または法律上の秘匿特権が失われるものではありません。本電子メールを受取られた方が、本来の受信者ではない場合には、本情報及びそのコピーすべてを削除・破棄し、本電子メールが誤って届いた旨を発信者宛てにご通知下さいますようお願いします。本情報の閲覧、発信または本情報に基づくいかなる行為も明確に禁止されていることをご了承ください。

You can use Div() widgets with empty string as text and custom width and height to add spacing between layout elements

I forgot to mention that I had tried that and the result was the buttons aligning in a Column instead of row. See picture:

···

On Tuesday, August 8, 2017 at 1:45:46 PM UTC+9, Sébastien Roche wrote:

You can use Div() widgets with empty string as text and custom width and height to add spacing between layout elements

This correspondence (including any attachments) is for the intended recipient(s) only. It may contain confidential or privileged information or both. No confidentiality or privilege is waived or lost by any mis-transmission. If you receive this correspondence by mistake, please contact the sender immediately, delete this correspondence (and all attachments) and destroy any hard copies. You must not use, disclose, copy, distribute or rely on any part of this correspondence (including any attachments) if you are not the intended recipient(s).本メッセージに記載および添付されている情報(以下、総称して「本情報」といいます。)は、本来の受信者による使用のみを意図しています。誤送信等により本情報を取得された場合でも、本情報に係る秘密、または法律上の秘匿特権が失われるものではありません。本電子メールを受取られた方が、本来の受信者ではない場合には、本情報及びそのコピーすべてを削除・破棄し、本電子メールが誤って届いた旨を発信者宛てにご通知下さいますようお願いします。本情報の閲覧、発信または本情報に基づくいかなる行為も明確に禁止されていることをご了承ください。

That’s strange. You could always switch to row(column(btn1,btn3),column(btn2,btn4)) instead of column(row(btn1,btn2),row(btn3,btn4)), seems like adding Divs conserves the layout in the first case but not the second.

This also did not work.

First I tried with all the four buttons just to check, like you suggested. (Did not work).

Then, because I just want two buttons not 4 I tried row(column(btn1),column(btn2)). (Also, did not work).

:frowning:

···

On Tuesday, August 8, 2017 at 9:55:53 PM UTC+9, Sébastien Roche wrote:

That’s strange. You could always switch to row(column(btn1,btn3),column(btn2,btn4)) instead of column(row(btn1,btn2),row(btn3,btn4)), seems like adding Divs conserves the layout in the first case but not the second.

This correspondence (including any attachments) is for the intended recipient(s) only. It may contain confidential or privileged information or both. No confidentiality or privilege is waived or lost by any mis-transmission. If you receive this correspondence by mistake, please contact the sender immediately, delete this correspondence (and all attachments) and destroy any hard copies. You must not use, disclose, copy, distribute or rely on any part of this correspondence (including any attachments) if you are not the intended recipient(s).本メッセージに記載および添付されている情報(以下、総称して「本情報」といいます。)は、本来の受信者による使用のみを意図しています。誤送信等により本情報を取得された場合でも、本情報に係る秘密、または法律上の秘匿特権が失われるものではありません。本電子メールを受取られた方が、本来の受信者ではない場合には、本情報及びそのコピーすべてを削除・破棄し、本電子メールが誤って届いた旨を発信者宛てにご通知下さいますようお願いします。本情報の閲覧、発信または本情報に基づくいかなる行為も明確に禁止されていることをご了承ください。

I can get something like the attached picture with row(col(),col()):

from bokeh.models.widgets import Button, Div
from bokeh.io import curdoc
from bokeh.layouts import row, column

btn1 = Button(label=“A”)
btn2 = Button(label=“B”)
btn3 = Button(label=“C”)
btn4 = Button(label=“D”)

dumdiv = Div(text=’’,width=10)
dumdiv2= Div(text=’’,width=10)
dumdiv3= Div(text=’’,width=50)

curdoc().add_root(row(column(btn1,dumdiv,btn3),dumdiv3,column(btn2,dumdiv2,btn4)))

``

Ok, got it. I changed your code a little bit and found this weird behavior(bug?).

If the width of the dumdiv is 20 (or lower) the buttons are displayed in a column. If the width is 21 or more, the buttons are displayed in a row, as desired.

Thanks for the continuos answers Sebastien.

Should I report this as a bug in git?

The code that works for me (with only two smaller buttons):

from bokeh.models.widgets import Button, Div
from [bokeh.io](http://bokeh.io) import curdoc
from bokeh.layouts import row

btn1 = Button(label="A", width=100)
btn2 = Button(label="B", width=100)

dumdiv= Div(text='',width=21)

curdoc().add_root(row(btn1,dumdiv,btn2))

This correspondence (including any attachments) is for the intended recipient(s) only. It may contain confidential or privileged information or both. No confidentiality or privilege is waived or lost by any mis-transmission. If you receive this correspondence by mistake, please contact the sender immediately, delete this correspondence (and all attachments) and destroy any hard copies. You must not use, disclose, copy, distribute or rely on any part of this correspondence (including any attachments) if you are not the intended recipient(s).本メッセージに記載および添付されている情報(以下、総称して「本情報」といいます。)は、本来の受信者による使用のみを意図しています。誤送信等により本情報を取得された場合でも、本情報に係る秘密、または法律上の秘匿特権が失われるものではありません。本電子メールを受取られた方が、本来の受信者ではない場合には、本情報及びそのコピーすべてを削除・破棄し、本電子メールが誤って届いた旨を発信者宛てにご通知下さいますようお願いします。本情報の閲覧、発信または本情報に基づくいかなる行為も明確に禁止されていることをご了承ください。

···

On Thu, Aug 10, 2017 at 10:56 PM, Sébastien Roche [email protected] wrote:

I can get something like the attached picture with row(col(),col()):

from bokeh.models.widgets import Button, Div
from bokeh.io import curdoc
from bokeh.layouts import row, column

btn1 = Button(label=“A”)
btn2 = Button(label=“B”)
btn3 = Button(label=“C”)
btn4 = Button(label=“D”)

dumdiv = Div(text=’’,width=10)
dumdiv2= Div(text=’’,width=10)
dumdiv3= Div(text=’’,width=50)

curdoc().add_root(row(column(btn1,dumdiv,btn3),dumdiv3,column(btn2,dumdiv2,btn4)))

``

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

To unsubscribe from this topic, visit https://groups.google.com/a/continuum.io/d/topic/bokeh/Xo4h2FOROho/unsubscribe.

To unsubscribe from this group and all its topics, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/0aeff6dc-f0ed-410f-89e9-2b212852309d%40continuum.io.

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

Mauricio S.C. Hernandes | Strategic Software Development | SBI BITS
Roppongi T-Cube 20F, 3-1-1 Roppongi, Minato-ku, Tokyo 106-0032 Japan
T +81-3-4510-7000 | E [email protected]
www.sbibits.com

I don’t know if it’s a bug or if it has to do with sizing_mode or other row parameters.
But if you put your row elements in columns it works as expected no matter what the width of the dumdiv is.

curdoc().add_root(row(column(btn1),column(dumdiv),column(btn2)))

``

Right. That works perfectly.

Thank you, I’ve been annoyed with these for months.

This correspondence (including any attachments) is for the intended recipient(s) only. It may contain confidential or privileged information or both. No confidentiality or privilege is waived or lost by any mis-transmission. If you receive this correspondence by mistake, please contact the sender immediately, delete this correspondence (and all attachments) and destroy any hard copies. You must not use, disclose, copy, distribute or rely on any part of this correspondence (including any attachments) if you are not the intended recipient(s).本メッセージに記載および添付されている情報(以下、総称して「本情報」といいます。)は、本来の受信者による使用のみを意図しています。誤送信等により本情報を取得された場合でも、本情報に係る秘密、または法律上の秘匿特権が失われるものではありません。本電子メールを受取られた方が、本来の受信者ではない場合には、本情報及びそのコピーすべてを削除・破棄し、本電子メールが誤って届いた旨を発信者宛てにご通知下さいますようお願いします。本情報の閲覧、発信または本情報に基づくいかなる行為も明確に禁止されていることをご了承ください。

···

On Tue, Aug 15, 2017 at 6:02 AM, Sébastien Roche [email protected] wrote:

I don’t know if it’s a bug or if it has to do with sizing_mode or other row parameters.
But if you put your row elements in columns it works as expected no matter what the width of the dumdiv is.

curdoc().add_root(row(column(btn1),column(dumdiv),column(btn2)))

``

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

To unsubscribe from this topic, visit https://groups.google.com/a/continuum.io/d/topic/bokeh/Xo4h2FOROho/unsubscribe.

To unsubscribe from this group and all its topics, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/10ab26ea-56a3-42a9-bf19-92498b8c9a36%40continuum.io.

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

Mauricio S.C. Hernandes | Strategic Software Development | SBI BITS
Roppongi T-Cube 20F, 3-1-1 Roppongi, Minato-ku, Tokyo 106-0032 Japan
T +81-3-4510-7000 | E [email protected]
www.sbibits.com

Hi,

···

On Tue, Aug 8, 2017 at 3:03 AM, [email protected] wrote:

How do I set the horizonal space between two Buttons with custom width in the same row?

The following code illustrates my problem:

from bokeh.models.widgets import Button
from [bokeh.io](http://bokeh.io) import curdoc
from bokeh.layouts import row, column

btn1 = Button(label="A", width=280, height=10)
btn2 = Button(label="B", width=280, height=10)

btn3 = Button(label="C")
btn4 = Button(label="D")

curdoc().add_root(column(row(btn1, btn2),
                    row(btn3, btn4)))





This code outputs the following page:








As you can see buttons C and D have a space between them, however buttons A and B do not.
How do I make room when setting the button width?

the widgets’ part of bokeh’s layout system is pretty fragile at this point and there’s a lot of peculiar behavior there. When adding a widget, like a button, to a layout, what you really add is WigetBox(Button(…)), but bokeh tries to conveniently hide this. Wrapping in WidgetBox() should happen automatically and width/height should be propagated accordingly, but it doesn’t in this case (a bug I presume). You can wrap manually like this:

from bokeh.models.layouts import WidgetBox

btn1 = WidgetBox(Button(label=“A”), width=280, height=10))

and you will get the expected layout. If you want to get additional space between buttons, then there are two options. Either modify CSS that defines buttons’ styling or use a spacer:

from bokeh.models.layouts import Spacer

layout = column(row(btn1, Spacer(width=50), btn2), …)

curdoc().add_root(layout)

Mateusz


I tried to change the height of the buttons (suggested by this [past message](https://groups.google.com/a/continuum.io/forum/#!topic/bokeh/487aN2ahmZ8)) but nothing changed.

This correspondence (including any attachments) is for the intended recipient(s) only. It may contain confidential or privileged information or both. No confidentiality or privilege is waived or lost by any mis-transmission. If you receive this correspondence by mistake, please contact the sender immediately, delete this correspondence (and all attachments) and destroy any hard copies. You must not use, disclose, copy, distribute or rely on any part of this correspondence (including any attachments) if you are not the intended recipient(s).本メッセージに記載および添付されている情報(以下、総称して「本情報」といいます。)は、本来の受信者による使用のみを意図しています。誤送信等により本情報を取得された場合でも、本情報に係る秘密、または法律上の秘匿特権が失われるものではありません。本電子メールを受取られた方が、本来の受信者ではない場合には、本情報及びそのコピーすべてを削除・破棄し、本電子メールが誤って届いた旨を発信者宛てにご通知下さいますようお願いします。本情報の閲覧、発信または本情報に基づくいかなる行為も明確に禁止されていることをご了承ください。

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 [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/c981ad0b-5a1e-4927-bc0b-035fa76cb3fd%40continuum.io.

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