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.
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.
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:
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!
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:
Awesome. Appreciate your help! The best part is once you get comfortable with this, you tend to not forget it.
