question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

layout vertical alignment with buttons

See original GitHub issue

In the notebook tutorials, the first app example in 08 - server.ipynb seems to have a messed up alignment:

image

And this is the script that generates this outcome:

# hello.py 

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

# create some widgets
button = Button(label="Say HI")
input = TextInput(value="Bokeh")
output = Paragraph()

# add a callback to a widget
def update():
    output.text = "Hello, " + input.value
button.on_click(update)

# create a layout for everything
#layout = VBox(children=[HBox(children=[button, input]), output])
layout = column(row(button, input), output)

# add the layout to curdoc
curdoc().add_root(layout)

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:3
  • Comments:16 (12 by maintainers)

github_iconTop GitHub Comments

3reactions
YaelGreen65commented, May 13, 2018

what is the work around for this problem: 627456c4-4d10-11e6-8252-9ec1fdbbd672 Thanks a lot!

1reaction
bryevdvcommented, Jul 11, 2019

is there a way to have a TextInput label appear to the left of the box instead of above it and left justified?

For that put a Div and TextInput (without a label) together in a Row or a GridBox

Read more comments on GitHub >

github_iconTop Results From Across the Web

Bootstrap Vertical alignment - examples & tutorial
Bootstrap 5 vertical alignment utilities position elements on the y-axis. You can center your content with it or align it to the top...
Read more >
Achieving Vertical Alignment (Thanks, Subgrid!) - CSS-Tricks
The two groups of buttons vertically stacked and the buttons are all consistently aligned with the. This time, the two nested grid items...
Read more >
Android, Vertical Alignment of Button in Linear Layout
It's designed to do exactly what you need. It's based on rows and columns and you can specify the row and col spans...
Read more >
vertical-align - CSS: Cascading Style Sheets - MDN Web Docs
The vertical-align CSS property sets vertical alignment of an inline, inline-block or table-cell box.
Read more >
Vertical text alignment in buttons and inputs - CodyHouse
The height and vertical alignment of buttons and inputs is determined by the combination of borders, padding, font-size, and line-height.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found