Plotly-Dash中元素的定位

Question

我做了一个基本的仪表板，如下所示，这是附在这篇文章底部的最小工作示例。我想(但不知道如何)居中滑块和与(目前硬编码为500像素)大约80%的图形宽度，响应于浏览器窗口的大小。我该怎么做呢？谢谢!

metainfo:我非常感谢一些关于在哪里寻找/如何搜索这样的主题的建议；我似乎用googling搜索了错误的东西，并且很难把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%'}
)