Search code examples
pythonplotlyplotly-dash

Centering a dcc.input field in Plotly Dash

I am trying to center a dcc.input text field to the middle of the screen, however the solutions found here: Plotly Dash center dcc.Input text field nor the https://dash.plotly.com/dash-core-components/input page has proven to fix the problem. My code is:

dcc.Input(
                id="textsearch",
                placeholder='Write your lyrics here and press ENTER...',
                type='text',
                value=None,
                debounce=True,
                style={'width': '20%',"display":"flex", "justifyContent":'center'}
                ),

Ive tried the 'textAlign':'center' as well which works for the html.H6 element above the input bar. Any ideas? See the picture below for reference for what exactly i would like to happen. enter image description here

Solution

  • You are applying style on the wrong component. You need to apply that to your Input's parent div.

    app.layout = html.Div(
    [
        html.Div(
            children=[
                dcc.Input(
                    id="textsearch",
                    placeholder="Write your lyrics here and press ENTER...",
                    type="text",
                    value="",
                    debounce=True,
                )
            ],
            style={"display": "flex", "justifyContent": "center"},
        )
    ]
)

    Also, it's advised to pass "" to your Input if you want it to be empty.