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

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).本メッセージに記載および添付されている情報（以下、総称して「本情報」といいます。）は、本来の受信者による使用のみを意図しています。誤送信等により本情報を取得された場合でも、本情報に係る秘密、または法律上の秘匿特権が失われるものではありません。本電子メールを受取られた方が、本来の受信者ではない場合には、本情報及びそのコピーすべてを削除・破棄し、本電子メールが誤って届いた旨を発信者宛てにご通知下さいますようお願いします。本情報の閲覧、発信または本情報に基づくいかなる行為も明確に禁止されていることをご了承ください。

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).本メッセージに記載および添付されている情報（以下、総称して「本情報」といいます。）は、本来の受信者による使用のみを意図しています。誤送信等により本情報を取得された場合でも、本情報に係る秘密、または法律上の秘匿特権が失われるものではありません。本電子メールを受取られた方が、本来の受信者ではない場合には、本情報及びそのコピーすべてを削除・破棄し、本電子メールが誤って届いた旨を発信者宛てにご通知下さいますようお願いします。本情報の閲覧、発信または本情報に基づくいかなる行為も明確に禁止されていることをご了承ください。

On Thu, Aug 10, 2017 at 10:56 PM, Sébastien Roche sebastienroche11@gmail.com 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 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/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 mauricio.hernandes@sbibits.com
www.sbibits.com

On Tue, Aug 15, 2017 at 6:02 AM, Sébastien Roche sebastienroche11@gmail.com 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 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/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 mauricio.hernandes@sbibits.com
www.sbibits.com

On Tue, Aug 8, 2017 at 3:03 AM, mauricio.hernandes@sbibits.com 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 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/c981ad0b-5a1e-4927-bc0b-035fa76cb3fd%40continuum.io.

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