如何使各种菜单的宽度相同？

Question

我有datePickerRange()、Input()和Dropdown()，它们的宽度不同，如下图所示（白色区域）。非常感谢您的帮助

dcc.DatePickerRange(id='date-range',
                   min_date_allowed=datetime(2020,1,1),
                   max_date_allowed=datetime.today(),
                   start_date=datetime(2021,10,30), 
                   end_date=datetime(2021,11,2),
                   style = {
                        'font-size': '3px','display': 'inline-block', 'border-radius' : '2px', 
                        'border' : '1px solid #ccc', 'color': '#333', 
                        'border-spacing' : '0', 'border-collapse' :'separate'
                        } 
                    )
]
),

dbc.Label('DTS Heatmap Start Time:'),
dcc.Input(id="starttime", type="text", value='00:00',placeholder='22:00'),
dbc.Label('DTS Heatmap End Time:'),
dcc.Input(id="endtime", type="text",  value='00:00',placeholder='18:00'),

dbc.Label('DTS Data Frequency'),
dcc.Dropdown(id='data-frequency-dropdown',
         options=[
                 {'label':'Minutes','value':'Minutes'},
                 {'label':'Daily','value':'Daily'},
                 {'label':'Weekly','value':'Weekly'},
                 {'label':'Monthly','value':'Monthly'},
                 ],
         value='Minutes',                         
        ),

如何使它们的宽度相同？谢谢

Answer 1

要为两个组件设置相同的宽度，您可以使用 width 属性添加 CSS 样式。所以如果你想为两个组件设置一个明确的宽度，你可以这样做：

dcc.DatePickerRange(id='date-range',
    min_date_allowed=dt(2020,1,1),
    max_date_allowed=dt.today(),
    start_date=dt(2021,10,30), 
    end_date=dt(2021,11,2),
    style = {
        'font-size': '3px','display': 'inline-block', 'border-radius' : '2px', 
        'border' : '1px solid #ccc', 'color': '#333', 
        'border-spacing' : '0', 'border-collapse' :'separate',
        # New CSS styling for width
        'width':'500px'
        } 
)

dcc.Input(
    id="starttime",
    type="text",
    value='00:00',
    placeholder='22:00',
    # New CSS styling for width
    style={'width':'500px'}
)

请注意，如果您为 DatePickerRange 组件提供的宽度大于它显示日期范围所需的宽度，那么它会显示一些额外的填充，这可能看起来不合需要。如果您想为输入提供 DatePickerRange 默认情况下的确切宽度，请给它 "width":"288px" ，因为这大约是 DatePickerRange 的默认宽度。

如何使各种菜单的宽度相同？

how to make same width of various menus?

plotly-dash