Python Forum
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
layout with dash
#1
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

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',},
            ],
            }
        ),
            
            
            
    ]
)
Reply


Forum Jump:

User Panel Messages

Announcements
Announcement #1 8/1/2020
Announcement #2 8/2/2020
Announcement #3 8/6/2020