Setting the layout of a button and input box

Dash Python
1

Untitled
Untitled.png1338×550 43.1 KB

Hi All,

I am having trouble arranging the button and text input in the top right corner the way I want them. As you can see they are offset below the dropdown and the button is slightly offset below the input box.

I have been having a lot of trouble manipulating that layout and would really appreciate some help!

The code used is shown below. Thanks so much!

**Sorry about the code format - no idea how to make it come out right…

import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd
import numpy as np
import plotly.plotly as py
import plotly.figure_factory as ff

DF=pd.read_csv(‘parsed_logfile.csv’)
save_num = 0
analytes = np.array([‘Hct’,‘Na’,‘K’,‘Ca’,‘Cl’,‘pO2’,‘pH’,‘HCO3’,
‘Crea’,‘Cr’,‘Lac’,‘Glu’,‘Ref’,‘Gnd’])

drifts = DF[‘Loc1’].str.extract(r’(.+?DRIFT.*$)’, expand=True)[0].unique()
analytes_drift = np.array([‘Hct’, ‘Na’, ‘K’, ‘Ca’, ‘Cl’, ‘pO2’, ‘pH’, ‘Lac’, ‘Glu’, ‘pCO2’])

app = dash.Dash()
app.css.append_css({“external_url”: “https://codepen.io/chriddyp/pen/bWLwgP.css”})
app.layout = html.Div(children=[
html.H1( #Heading
#children=‘GEM 4K #xxxxxx - Cart Lot #xxxxxxxxxx’,
children=‘Electro Chem Analytes’,
style={
‘textAlign’: ‘center’
}
),

    html.Div([                  #Left Dropdown
    dcc.Dropdown(
        id='analytes dropdown',
        options=[{'label': i, 'value': i} for i in analytes],
        placeholder="Select Analytes",
        multi=True,
        value=['Na','pH']),
],
    style={'width': '68%', 'display': 'inline-block'}),
    
    html.Div([
        dcc.Input(id='Filename Input', type="text", value='Filename'),
        html.Button(children='Save Data', id = 'save button', type='submit',
                n_clicks=0)],

        style = {'display': 'inline-block', 'width': '30%', 'margin':'auto'}),
                    

        html.Div([
        dcc.Graph(
            id='analytes graph',
            hoverData={'points': [{'customdata': 'Na'}]} #AAAA
            )
        ],
    style={'display': 'inline-block', 'width': '49%'}),
            
            
    html.Div([
        dcc.Graph(id='analytes std graph'),
                  ],
            
    style={'display': 'inline-block', 'width': '49%'}),

    html.Div([                  #Lower dropdown 1
    dcc.Dropdown(
        id='hist dropdown 1',
        placeholder="Select Analyte",
        clearable=True,
        options=[{'label': i, 'value': i} for i in analytes],
        value='Na')         
        ],       
    style={'width': '94%', 'display': 'inline-block'}),


    html.Div([
        dcc.Graph(id='analyte hist')],
    style={'display': 'inline-block', 'width': '49%'}),
            
    html.Div([
        dcc.Graph(id='analyte box')],
    style={'display': 'inline-block', 'width': '49%'})
    ]

)

@app.callback(
dash.dependencies.Output(‘analytes graph’, ‘figure’),
[dash.dependencies.Input(‘analytes dropdown’, ‘value’)]

    )

def update_figure(analyte_list):
dff = DF.query(‘Loc1 == @analyte_list’)

analytes=analyte_list
data=[]
for analyte in analyte_list:
    data.append(go.Scatter(
            x=dff.query('Loc1 == @analyte')['Datetime'],
            y=dff.query('Loc1 == @analyte')['Value'],
            name=str(analyte),
            customdata=analyte
            )
)
    
return {
        'data': data,
        'layout': go.Layout(
                hovermode='closest')}

@app.callback(
dash.dependencies.Output(‘hist dropdown 1’, ‘className’),
[dash.dependencies.Input(‘analytes dropdown’, ‘value’),
dash.dependencies.Input(‘save button’, ‘n_clicks’)],
[dash.dependencies.State(‘Filename Input’, ‘value’)]
)

def update_figure(analyte_list, n_clicks, filename):
dff = DF.query(‘Loc1 == @analyte_list’)
name=filename+’.csv’
dff.to_csv(name, index=False)

@app.callback(
dash.dependencies.Output(‘analytes std graph’, ‘figure’),
[dash.dependencies.Input(‘analytes dropdown’, ‘value’)]
)

def update_figure(analyte_list):
dff = DF.query(‘Loc1 == @analyte_list’)

groupby_dff=(dff['Value'].groupby(dff['Loc1'], sort=False))
sds=groupby_dff.std(ddof=0)
means=groupby_dff.mean()

standard_value=pd.Series([])
for analyte in analyte_list:
    standard_value=standard_value.append((groupby_dff.get_group(analyte)-means.loc[analyte])/sds.loc[analyte])

dff['Standard Value']=standard_value


data=[]
for analyte in analyte_list:
    data.append(go.Scatter(
            x=dff.query('Loc1 == @analyte')['Datetime'],
            y=dff.query('Loc1 == @analyte')['Standard Value'],
            name=str(analyte)))

if len(analyte_list)>1: 
    return {
            'data': data,
            'layout': go.Layout(
                    hovermode='closest')}
else: 
    return {
            'data': 2 
            }

@app.callback(
dash.dependencies.Output(‘analyte hist’, ‘figure’),
[dash.dependencies.Input(‘hist dropdown 1’, ‘value’)]
)

def update_figure(analyte):
dff = DF.query(‘Loc1 == @analyte’)
bin_width=(dff[‘Value’].max()-dff[‘Value’].min())/(dff.shape[0])**0.5

return ff.create_distplot([dff['Value']], ['distplot'], bin_size=bin_width)

@app.callback(
dash.dependencies.Output(‘analyte box’, ‘figure’),
[dash.dependencies.Input(‘hist dropdown 1’, ‘value’)]
)

def update_figure(analyte):
dff = DF.query(‘Loc1 == @analyte’)

return {
    'data': [go.Box(
            y=dff['Value'],
            boxmean = 'sd',

)]}

if name == ‘main’:
app.run_server(debug=False)

2

Hello @Efidler12,

I would recommend you to first draw your layout on a paper to know how you should organize your different divs. I gathered in the same div your dropdown and your input displayed as table-cell.

html.H1('Electro Chem Analytes', style = {'textAlign': 'center'}),
# BEGINNING OF MODIFICATIONS
html.Div([
    html.Div([
        dcc.Dropdown(
            id = 'analytes dropdown',
            options = [{'label': i, 'value': i} for i in analytes],
            placeholder = 'Select Analytes',
            multi = True,
            value = ['Na','pH']),
        ],
        style = dict(
            width = '68%',
            display = 'table-cell',
            ),
        ),
    html.Div([
        dcc.Input(id = 'Filename Input', type = 'text', value = 'Filename'),
        html.Button(
            children = 'Save Data',
            id = 'save button',
            type = 'submit',
            n_clicks = 0
            ),
        ],
        style = dict(
            width = '30%',
            display = 'table-cell',
            ),
        ),
    ],
    style = dict(
        width = '100%',
        display = 'table',
        ),
    ),
# END OF MODIFICATIONS
html.Div([
    dcc.Graph(
        id = 'analytes graph',
        hoverData = {'points': [{'customdata': 'Na'}]} #AAAA
    )
    ],
    style = {'display': 'inline-block', 'width': '49%'},
    ),

I hope it is what you are looking for.

1 Like
3

Thank you for the reply @Kefeng!

This is a lot better but it looks like the text input box is set higher than the dropdown just enough to make me crazy. Do you have any clue why that is happening? Thanks so much!

Untitled
Untitled.png1335×630 40.4 KB

1 Like
4

Adding

verticalAlign = "middle",

to the style dictionary of the two divs displayed as table-cell should do the trick.

5 Likes
5

That helped a lot - thanks so much!

1 Like