john mondego
john mondego

Reputation: 189

Plotly Dash Graph Inputs to the Right of Graph

I have a plotly graph with input boxes on top.

enter image description here

Is there a way to send these input boxes to the right of the graph. I have checked the documentation but it doesn't seem to mention this in the dcc.Input section. https://dash.plotly.com/dash-core-components/input

app.layout = html.Div(
    [
        dcc.Input(
            id = "input_{}".format(_),
            type = _,
            placeholder="input type {}".format(_),
        )
        for _ in ALLOWED_TYPES
    ]
    + [dcc.Graph(id='graph', figure=fig, style={'width': '90vh', 'height': '90vh'})]
)

dcc.Input doesn't seem to have an option for this. Thanks for any help.

Upvotes: 1

Views: 714

Answers (1)

miqh
miqh

Reputation: 3664

You can use the style prop of dcc.Input to align the input elements with CSS.

dcc.Input(
  ...
  style={"float": "right"},
)

Or if you want a bit more control with how the input elements are positioned, you could always use Flexbox. That would involve setting the style prop on the outer html.Div such that display: flex, and then you can use flex properties for the input elements.

Upvotes: 1

Related Questions