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