Oct-05-2018, 08:08 AM
I'm trying to create a layout with dash in python but I'm having some difficulties.
I have a dropdown menu and next to dropdown menu I want an input field.
With my code, the dropdown menu and the input field are not in line. I don't understand why! I tried by changing the marging but it doesn't work.
Also, when I make my screen smaller, I would like the text above the input field and the input field move down together. That does not seem to work either.
Can somebody help me please?
If you have other suggestions to improve my code, shoot!
Thanks in advance
Brecht
I have a dropdown menu and next to dropdown menu I want an input field.
With my code, the dropdown menu and the input field are not in line. I don't understand why! I tried by changing the marging but it doesn't work.
Also, when I make my screen smaller, I would like the text above the input field and the input field move down together. That does not seem to work either.
Can somebody help me please?
If you have other suggestions to improve my code, shoot!
Thanks in advance
Brecht
import dash from dash.dependencies import Input, Output, State import dash_core_components as dcc import dash_html_components as html import base64 import pandas as pd import datetime from datetime import datetime as dt app = dash.Dash() image_filename = 'banner.png' encoded_image = base64.b64encode(open(image_filename, 'rb').read()) app.layout = html.Div( style={'margin': -1}, children=[ html.Img(src='data:image/png;base64,{}'.format(encoded_image.decode()),style={'float':'middle'}), html.Hr(), html.H4('Select project:',style={'marginBottom': 5, 'marginTop': 5}), dcc.Dropdown( id='select_project', placeholder="Select project", options=[ {'label': 'Masureel', 'value': '1'}, {'label': "D'arta", 'value': '2'}, {'label': 'UZ Brussel', 'value': '3'} ], ), html.H4('Start time:',style={'marginBottom': 5, 'marginTop': 5}), dcc.Input(type='date'), dcc.Input(type='time'), html.H4('End time:',style={'marginBottom': 5, 'marginTop': 5}), dcc.Input(type='date'), dcc.Input(type='time'), html.Div( className='container1', #style={'paddingTop': 60}, children=[ html.H4('Graph1:',style={'marginBottom': 5, 'marginTop': 5,'width':800,'display':'inline-block'}), html.H4('Max. value:',style={'marginBottom': 5, 'marginTop': 5,'width':800,'display':'inline-block'}), dcc.Dropdown( id='select_graph1', placeholder="Select graph", options=[ {'label': 'RO1FT01 Flowsensor permeaat', 'value': '1'}, {'label': 'RO1FT02 Flowsensor concentraat', 'value': '2'}, {'label': 'RO1FT03 Flowsensor recirculatie', 'value': '3'}, {'label': 'UF1FT01 Flowsensor voeding', 'value': '4'}, {'label': 'UF1FT02 Flowsensor backwash', 'value': '5'}, ], style={'heigth':30,'width':800,'display':'inline-block','margin':0,'marginBottom': 0, 'marginTop': 0} ), dcc.Input(id='max_graph1', value='100', type='text',style={'height':30,'display':'inline-block','marginBottom': 0, 'marginTop': -10}), ] ), html.Div( className='container2', #style={'paddingTop': 60}, children=[ html.H4('Graph2:',style={'marginBottom': 5, 'marginTop': 5,'width':800,'display':'inline-block'}), html.H4('Max. value:',style={'marginBottom': 5, 'marginTop': 5,'width':800,'display':'inline-block'}), dcc.Dropdown( id='select_graph2', placeholder="Select graph", options=[ {'label': 'RO1FT01 Flowsensor permeaat', 'value': '1'}, {'label': 'RO1FT02 Flowsensor concentraat', 'value': '2'}, {'label': 'RO1FT03 Flowsensor recirculatie', 'value': '3'}, {'label': 'UF1FT01 Flowsensor voeding', 'value': '4'}, {'label': 'UF1FT02 Flowsensor backwash', 'value': '5'}, ], style={'heigth':30,'width':800,'display':'inline-block'} ), dcc.Input(id='max_graph2', value='100', type='text',style={'height':30,'display':'inline-block'}), ] ), html.Div( className='container3', #style={'paddingTop': 60}, children=[ html.H4('Graph3:',style={'marginBottom': 5, 'marginTop': 5,'width':800,'display':'inline-block'}), html.H4('Max. value:',style={'marginBottom': 5, 'marginTop': 5,'width':800,'display':'inline-block'}), dcc.Dropdown( id='select_graph3', placeholder="Select graph", options=[ {'label': 'RO1FT01 Flowsensor permeaat', 'value': '1'}, {'label': 'RO1FT02 Flowsensor concentraat', 'value': '2'}, {'label': 'RO1FT03 Flowsensor recirculatie', 'value': '3'}, {'label': 'UF1FT01 Flowsensor voeding', 'value': '4'}, {'label': 'UF1FT02 Flowsensor backwash', 'value': '5'}, ], style={'heigth':30,'width':800,'display':'inline-block'} ), dcc.Input(id='max_graph3', value='100', type='text',style={'height':30,'display':'inline-block'}), ] ), html.Div( className='container4', #style={'paddingTop': 60}, children=[ html.H4('Graph4:',style={'marginBottom': 5, 'marginTop': 5,'width':800,'display':'inline-block'}), html.H4('Max. value:',style={'marginBottom': 5, 'marginTop': 5,'width':800,'display':'inline-block'}), dcc.Dropdown( id='select_graph4', placeholder="Select graph", options=[ {'label': 'RO1FT01 Flowsensor permeaat', 'value': '1'}, {'label': 'RO1FT02 Flowsensor concentraat', 'value': '2'}, {'label': 'RO1FT03 Flowsensor recirculatie', 'value': '3'}, {'label': 'UF1FT01 Flowsensor voeding', 'value': '4'}, {'label': 'UF1FT02 Flowsensor backwash', 'value': '5'}, ], style={'heigth':30,'width':800,'display':'inline-block'} ), dcc.Input(id='max_graph4', value='100', type='text',style={'height':30,'display':'inline-block'}), ] ), dcc.Graph( id='example-graph', figure={ 'data': [ {'x': 1, 'y': 10, 'type': 'line',}, {'x': 2, 'y': 20, 'type': 'line',}, ], } ), ] )