CODEWITHSUNDEEP
pythonuser-inputcenteringplotly-dash
Austin
Austin

Reputation: 7339

Plotly Dash center dcc.Input text field

I'm having a lot of difficulties figuring out what style parameters are required to center a dash_core_components.Input text field in the middle of my page.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

text_input_style = {'justify-content': 'center', 'align-items': 'center'}
bucket_select = html.Div([
    html.Label('S3 bucket:'),
    dcc.Input(id='bucket_name', placeholder='Enter input here...', 
              value=None, type='text', 
              style={'width': '10%', 'textAlign': 'center'}),
    html.Div(id='bucket_out')
], style=text_input_style)

app = dash.Dash(__name__)
app.layout = html.Div(bucket_select)
app.run_server(port=5555)

So far I've tried:

I've tried searching the documentation for dcc.Input, but I can't find any style information.

Upvotes: 3

Views: 12405

Answers (1)

coralvanda
coralvanda

Reputation: 6606

This is where you can find the various props for dcc.Input. You can set the containing div to have display='flex' and justifyContent='center'. Example:

html.Div(
    children=[dcc.Input()],  # fill out your Input however you need
    style=dict(display='flex', justifyContent='center')
)

Upvotes: 3

Related Questions