✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🧬 Learn how to build RNA-Seq data apps with Python & Dash. Register for the May 20 Webinar!

Label for dcc.Input

Is there anyway for me to add a label or a piece of text to side of the dcc.Input component? For example:

Input goes here: dcc.Input component,
where “Input goes here:” is the label/piece of text and dcc.Input is the actual component.

In the examples provided, they seem to be using a separate html.Div or html.I to inform the user what goes into the field and these appear above the dcc.Input component.

Hi @philo

You can use any component to do that like html.H6, html.P or an html.Div.

If you use style={‘display’: ‘inline-block’} in both component they will be showed in the same line. also use ‘margin-left’ or ‘margin-right’ to adjust the distance between them.

1 Like

Hi @Eduardo ,

Below is my code snippet:

app.layout=html.Div([
    html.H4('Customer Name',style={'display':'inline-block','margin-right':20}),
    dcc.Input(id='customer-name',type='text',placeholder='',style={'display':'inline-block'}),
    html.H4('Site Name',{'display':'inline-block','margin-right':20}),
    dcc.Input(id='site-name',type='text',placeholder='',style={'display':'inline-block'}),
    html.H4('Facility type',style={'display':'inline-block','margin-right':20}),
    dcc.Dropdown(id='facility',
                 options=[{'label':'Unknown','value':''},
                          {'label':'Cold Storage','value':'cs'},
                          {'label':'Commercial Office Space','value':'cos'},
                          {'label':'School','value':'sch'},
                          {'label':'Grocery Store','value':'gro'},
                          {'label':'Community Centre','value':'cc'}],
                 value='',
                 style={'width':'500px',
                        'height': '50px',
                        'lineHeight': '60px',
                        'borderWidth': '1px',
                        })
                 ])

But I’m getting an output that looks like the below. Besides the first components, the rest are unaligned.
image

Hey @philo ,

I really do not know why is this behaivour but I’m wraped all components in an html.Div and then it works, I added borders to see each component limits, for some reason I also don’t know the dcc.Dropdown is not aligned, you can manage it using margin top.

Here is the code:

import dash
import dash_table
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout=html.Div([
    html.Div([
        html.H4('Customer Name',style={'display':'inline-block','margin-right':20, 'border': '1px solid black'}),
        dcc.Input(id='customer-name',type='text',placeholder='',style={'display':'inline-block', 'border': '1px solid black'}),
        ], style={'display':'inline-block', 'border': '1px solid black'}),
    html.Div([
        html.H4('Site Name',{'display':'inline-block', 'border': '1px solid black'}),
        ], style={'display':'inline-block', 'margin-right':20, 'margin-left':20, 'border': '1px solid black'}),
    html.Div([
        dcc.Input(id='site-name',type='text',placeholder='',style={'display':'inline-block', 'border': '1px solid black'}),
        ], style={'display':'inline-block', 'border': '1px solid black'}),    
    html.Div([
        html.H4('Facility type',style={'display':'inline-block','margin-right':20, 'border': '1px solid black'}),
        ], style={'display':'inline-block', 'margin-right':20, 'margin-left':20, 'border': '1px solid black'}),
    html.Div([
        dcc.Dropdown(id='facility',
                 options=[{'label':'Unknown','value':''},
                          {'label':'Cold Storage','value':'cs'},
                          {'label':'Commercial Office Space','value':'cos'},
                          {'label':'School','value':'sch'},
                          {'label':'Grocery Store','value':'gro'},
                          {'label':'Community Centre','value':'cc'}],
                 value='',
                 style={'width':'500px',
                        'height': '50px',
                        'lineHeight': '60px',
                        'border': '1px solid black',
                        })
        ], style={'display':'inline-block', 'border': '1px solid black'}),
    ])


if __name__ == "__main__":
    app.run_server(debug=True)

here is the result:

1 Like

Thank you @Eduardo this is great! What changes would I have to make if I want Customer Name, Site Name and Facility type one below the other with the input fields to the right respectively? For Example:

Customer Name: Input Field
Site Name: Input Field
Facility Type: Dropdown Menu

Thank you!

@philo

I found that in the second html.H4 had a missing style= thats why didn’t work properly.

Now I added some ‘width’ properties and margin top to improve the layout, here is the code:

import dash
import dash_table
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout=html.Div([
    html.Div([
        html.H4('Customer Name',style={'display':'inline-block','margin-right':20}),
        dcc.Input(id='customer-name',type='text',placeholder='', style={'display':'inline-block', 'border': '1px solid black'}),
        ], style={'display':'inline-block', 'width': '100%'}),
    html.Div([
        html.H4('Site Name', style= {'display':'inline-block','margin-right':20, 'margin-top':0}),
        dcc.Input(id='site-name',type='text',placeholder='', style={'display':'inline-block'}),
        ], style={'display':'inline-block', 'width': '100%'}),    
    html.Div([
        html.H4('Facility type',style={'display':'inline-block','margin-right':20, 'margin-top':0}),
        dcc.Dropdown(id='facility',
                 options=[{'label':'Unknown','value':''},
                          {'label':'Cold Storage','value':'cs'},
                          {'label':'Commercial Office Space','value':'cos'},
                          {'label':'School','value':'sch'},
                          {'label':'Grocery Store','value':'gro'},
                          {'label':'Community Centre','value':'cc'}],
                 value='',
                 style={'width':'500px',
                        'display':'inline-block',
                        'margin-top':0,
                        })
        ], style={'display':'inline-block', 'margin-top':0}),
    ])

And the result:

1 Like

Awesome. Appreciate your help! The best part is once you get comfortable with this, you tend to not forget it.

1 Like