即使屏幕尺寸在 Dash-plotly 中使用 python 改变，如何在导航栏中固定按钮的位置

Posted 2023-02-18

技术标签:

【中文标题】即使屏幕尺寸在 Dash-plotly 中使用 python 改变，如何在导航栏中固定按钮的位置【英文标题】：How to make the positions of buttons in navbar fixed even when the screen size changes in Dash-plotly with python 【发布时间】：2022-01-12 15:31:35 【问题描述】：

即使在我们放大浏览器或屏幕大小发生变化时，我也会尝试在我的 Dash 应用程序的 Nanbar 中保持按钮的位置固定。我使用破折号引导组件来制作布局，但是当我放大或使用较小的显示器时，按钮会迷失方向。我是新手，因此我们将不胜感激。

100% 缩放

110% 缩放

这是我的代码

import random
import time
import webbrowser
from collections import deque

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
from dash.dependencies import Output, Input

BS = "https://codepen.io/chriddyp/pen/bWLwgP.css"
app = dash.Dash('vehicle-data', external_stylesheets=[BS])

button_group = html.Div(
    [
        dbc.NavbarBrand(dcc.Link(
            dbc.Button(children='HOME',
                       style=
                           'display': 'inline-block',
                           'align': 'center',
                           'color': 'white', 'marginLeft': '100px',
                           'fontSize': '15px ',
                           'backgroundColor': '#101820',
                           'width': '150px',
                           'height': '50px',
                           'marginRight': '100px'
                       , className='lg'),

            href='http://127.0.0.1:5050/', refresh=True), className='lg'),

        dbc.NavbarBrand(dcc.Link(
            dbc.Button(children='OVERVIEW',
                       style='color': 'white',
                              'backgroundColor': '#101820',
                              'marginLeft': '10px',
                              'fontSize': '15px ',
                              'width': '150px',
                              'marginRight': '100px',
                              'height': '50px'
                              ),
            href='/pages/overview', refresh=True)),
        dbc.NavbarBrand(dcc.Link(
            dbc.Button(children='GRAPH',
                       style='color': 'white',
                              'backgroundColor': '#101820',
                              'fontSize': '15px ',
                              'marginLeft': '10px',
                              'marginRight': '100px',
                              'width': '150px',
                              'height': '50px'
                              ),
            href='/pages/graph_page', refresh=True)),
        dbc.NavbarBrand(dcc.Link(
            dbc.Button(children='CONSOLE',
                       style='color': 'white',
                              'backgroundColor': '#101820',
                              'fontSize': '15px ',
                              'marginLeft': '10px',
                              'marginRight': '100px',
                              'width': '150px',
                              'height': '50px'
                              ),
            href='/log_stream', refresh=True)),
        dbc.NavbarBrand(dcc.Link(
            dbc.Button(children='DIAGNOSTIC',
                       style='color': 'white',
                              'backgroundColor': '#101820',
                              'marginLeft': '2px',
                              'fontSize': '15px ',
                              'width': '170px',
                              'marginRight': '100px',
                              'height': '50px'
                              ),
            href='/pages/diag', refresh=True))
    ],

)

app.layout = html.Div([
    html.Div([
        dbc.Row(
            [
                dbc.Col([button_group]),
            ],
            style=
                'textAlign': 'center',
                'position': 'sticky',
                'backgroundColor': '#101820',
                'display': 'flex',
                'marginRight': '0px',
            ,
        ),
        dcc.Location(id='url', refresh=False),
        html.Div(id='page-content', children=[])
    ]),
])


if __name__ == '__main__':
    webbrowser.open('http://127.0.0.1:8050/')
    app.run_server(debug=True)

【问题讨论】：

调整窗口大小或缩放时按钮应该有什么行为？我试图让它们粘在同一行（对齐一行） 【参考方案1】：

为了防止块的内容被换行，你需要在这个块的CSS样式中添加white-space: nowrap;。

所以，对于 Dash，它是 'whiteSpace': 'nowrap'：

app.layout = html.Div([
    html.Div([
        dbc.Row(
            [
                dbc.Col(
                    [button_group],
                    style='whiteSpace': 'nowrap'
                ),
            ],
            style=
                'textAlign': 'center',
                'position': 'sticky',
                'backgroundColor': '#101820',
                'display': 'flex',
                'marginRight': '0px',
            ,
        ),
        dcc.Location(id='url', refresh=False),
        html.Div(id='page-content', children=[])
    ]),
])

缩放变化时正确显示导航栏的唯一方法，我知道是固定宽度布局。

这是一个经过一点重构的示例代码。按钮样式已移至nav_btn_style，删除了不必要的嵌套元素。

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
from dash.dependencies import Output, Input
import dash_bootstrap_components as dbc

# BS = "https://codepen.io/chriddyp/pen/bWLwgP.css"
app = dash.Dash('vehicle-data', external_stylesheets=[dbc.themes.BOOTSTRAP])

# style for navigation buttons
nav_btn_style = 
    'align': 'center',
    'color': 'white', 
    'backgroundColor': '#101820',
    'fontSize': '1rem',
    'width': '10rem',
    'height': '3.2rem',
    'margin': '0rem 1rem',


button_group = dbc.Nav(
    [
        dbc.NavItem(dcc.Link(
            dbc.Button(
                children='HOME',
                style=nav_btn_style,
                ),
            href='/',
            refresh=True),
            ),
        dbc.NavItem(dcc.Link(
            dbc.Button(
                children='OVERVIEW',
                style=nav_btn_style,
                ),
            href='/pages/overview',
            refresh=True),
            ),
        dbc.NavItem(dcc.Link(
            dbc.Button(
                children='GRAPH',
                style=nav_btn_style,
                ),
            href='/pages/graph_page',
            refresh=True),
            ),
        dbc.NavItem(dcc.Link(
            dbc.Button(
                children='CONSOLE',
                style=nav_btn_style
                ),
            href='/log_stream',
            refresh=True),
            ),
        dbc.NavItem(dcc.Link(
            dbc.Button(
                children='DIAGNOSTIC',
                style=nav_btn_style,
                ),
            href='/pages/diag',
            refresh=True),
            )
    ],
    horizontal='around',
    style=
        'flexWrap': 'nowrap',  # no wrap buttons 
        'padding': '0.5rem 3rem',
        'border': '3px dotted crimson',  # nav bar border
        'position': 'sticky',
        'backgroundColor': '#101820',
        
)

app.layout = html.Div([
    button_group,
    dcc.Location(id='url', refresh=False),
    html.Div(
        id='page-content', children=['TEST'],
        style=
            'height': '20rem',
            'border': '3px dotted royalblue',
            'display': 'flex',
            'justifyContent': 'center',
            'alignItems': 'center'
            
        ),
    ],
    style='margin': '0px auto', 'width': '80rem'  # fixed width for outer div
)


if __name__ == '__main__':
    webbrowser.open('http://127.0.0.1:8050/')
    app.run_server(debug=True)

以及它的外观

【讨论】：

感谢您的回复，但是使用此代码，如果我放大按钮，则会离开导航栏。我已经添加了图片。 @rohith santosh 有几个问题。 1. 使用的样式表破坏了导航栏中元素的排列。是否有必要使用这个特定的样式表？ 2. 需要用 NavbarBrand 代替 NavItem 吗？样式表可以是

external_stylesheets = [dbc.themes.BOOTSTRAP] app = dash.Dash(__name__, external_stylesheets=external_stylesheets, suppress_callback_exceptions=True)

我们可以将NavbarBrand改为NavItem 补充了我的答案再次感谢，能不能不按屏幕大小做宽度？【参考方案2】：

import random
import time
import webbrowser
from collections import deque

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
import plotly.graph_objs as go
from dash.dependencies import Output, Input

BS = "https://codepen.io/chriddyp/pen/bWLwgP.css"
app = dash.Dash('vehicle-data', external_stylesheets=[BS])

button_group = html.Div(
    [
        dbc.NavbarBrand(dcc.Link(
            dbc.Button(children='HOME',
                       style=
                           'display': 'inline-block',
                           'align': 'center',
                           'color': 'white', 'marginLeft': '100px',
                           'fontSize': '15px ',
                           'backgroundColor': '#101820',
                           'width': '150px',
                           'height': '50px',
                           'marginRight': '100px'
                       , className='lg'),

            href='http://127.0.0.1:5050/', refresh=True), className='lg'),

        dbc.NavbarBrand(dcc.Link(
            dbc.Button(children='OVERVIEW',
                       style='color': 'white',
                              'backgroundColor': '#101820',
                              'marginLeft': '10px',
                              'fontSize': '15px ',
                              'width': '150px',
                              'marginRight': '100px',
                              'height': '50px'
                              ),
            href='/pages/overview', refresh=True)),
        dbc.NavbarBrand(dcc.Link(
            dbc.Button(children='GRAPH',
                       style='color': 'white',
                              'backgroundColor': '#101820',
                              'fontSize': '15px ',
                              'marginLeft': '10px',
                              'marginRight': '100px',
                              'width': '150px',
                              'height': '50px'
                              ),
            href='/pages/graph_page', refresh=True)),
        dbc.NavbarBrand(dcc.Link(
            dbc.Button(children='CONSOLE',
                       style='color': 'white',
                              'backgroundColor': '#101820',
                              'fontSize': '15px ',
                              'marginLeft': '10px',
                              'marginRight': '100px',
                              'width': '150px',
                              'height': '50px'
                              ),
            href='/log_stream', refresh=True)),
        dbc.NavbarBrand(dcc.Link(
            dbc.Button(children='DIAGNOSTIC',
                       style='color': 'white',
                              'backgroundColor': '#101820',
                              'marginLeft': '2px',
                              'fontSize': '15px ',
                              'width': '170px',
                              'marginRight': '100px',
                              'height': '50px'
                              ),
            href='/pages/diag', refresh=True))
    ],

)

app.layout = html.Div([
    html.Div([
        dbc.Row(
            [
                dbc.Col([button_group]),
            ],
            style=
                'textAlign': 'center',
                'position': 'sticky',
                'backgroundColor': '#101820',
                'display': 'flex',
                'marginRight': '0px',
                'maxWidth':'1500px',
                'width':'1500px'
            ,
        ),
        dcc.Location(id='url', refresh=False),
        html.Div(id='page-content', children=[])
    ]),
])


if __name__ == '__main__':
    webbrowser.open('http://127.0.0.1:8050/')
    app.run_server(debug=True)

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

以上是关于即使屏幕尺寸在 Dash-plotly 中使用 python 改变，如何在导航栏中固定按钮的位置的主要内容，如果未能解决你的问题，请参考以下文章

为谷歌 DFP 广告缩放到不同的安卓屏幕尺寸 - Phonegap

屏幕尺寸更改时保持图形轮廓

Android 屏幕适配

Css取决于屏幕尺寸[重复]

当屏幕尺寸小于1440,某一行的文字变成省略号

iPhone每一代的屏幕尺寸比例是多少？