Plotly-Dash中元素的位置

Question

我制作了一个基本的仪表板，如下所示，该工作的最小示例附在本文的底部。我想（但不知道如何）将滑块和居中（当前硬编码为500 pix）的图形宽度设置为80％，以响应浏览器窗口大小。我怎样才能做到这一点？谢谢！

[metainfo：我很感谢您在哪里寻找/如何搜索此类主题的一些建议；我似乎在搜索错误的内容，并且很难将Dash文档的各个部分放在一起][] 1

import dash
import dash_table
import dash_daq as daq
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 numpy as np

# pydata stack
import pandas as pd
from sqlalchemy import create_engine

def makeplot(slider):
    gobar=[go.Bar(
                x=[1,2,3],
                y=[1,slider,5],
                name='I am {}'.format(slider)) ]
    content= {
            'data':gobar,
            'layout':dict(title='Mygraph')
            }
    return content

## layout
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

## app
app.layout = html.Div([
    dcc.Graph(id='graph-with-slider'),
    daq.Slider(
        id='myslider',
        min=1,
        max=5,
        value=3,
        marks={str(i): 'Label_'+str(i) for i in np.arange(1,6)},
        step=None,
        size=500),
])

## callbacks
@app.callback(
    Output('graph-with-slider', 'figure'),
    [Input('myslider', 'value')])
def update_figure(myval):
    content=makeplot(myval)
    return content

# run server
if __name__ == '__main__':
    app.run_server(debug=True)

Answer 1

我找到了解决方案。本质上使用dcc滑块（而不是daq滑块），并添加填充将滑块很好地置于中央：

html.Div([
        dcc.Slider(
            id='year-slider',
            min=0,
            max=len(t.freqs)-1,
            value=1,
            marks={str(i): key for i,key in enumerate(t.freqs.keys())},
            # marks = {displaystring : internal value}
            step=None,
            # size=500                
        ),
    ],
    style={'width': '50%','padding-left':'25%', 'padding-right':'25%'}
)