python - Dash Boostrap 组件每隔一个输入就切断表

Question

我有一个非常基本的Dash应用程序，它使用dash bootstrap和dash core components.

每隔一个输入，最后一个Dbc.Row()切入前一个Dbc.Row()，这恰好是主数据表。它只发生在其他输入 - 即 #1 是正确的，#2 被切断，#3 是正确的，#4 被切断，等等。

简而言之，我已经包含了应用程序布局和一个基本的代码片段。任何数据都可以重现该问题。

输入 #1 - 没有问题

输入＃2 - “测试文本”切断表格

输入 #3 - 没有问题

编码：

# Initialize the app server, starting info, and rgba of background
app = dash.Dash(__name__,
                external_stylesheets=[dbc.themes.BOOTSTRAP],
                meta_tags = [{'name': 'viewport',
                             'content': 'width=device-width, initial-scale=1'
                            }]
                   )

server = app.server

rgba = 'rgba(248, 246, 243, 1)'

input_options = df['col']

# ------------------------------------------------------------------------------
# App layout (REMEMBER, BOOTSTRAP LAYOUT HAS 12 COLUMNS)
app.layout = dbc.Container([
    
    # Row 1
    dbc.Row([
        
        # Row 1, Column 1 -- A blank gutter
        dbc.Col([
        ],
            style={'height': '2vh', 'backgroundColor': rgba}
        )
        
    ], no_gutters=True, justify='center'),
            
    # Row 2
    dbc.Row([   
        
        # Row 2, Column 1 -- The City, State Dropdown
        dbc.Col([
            dcc.Dropdown(id='select_citystate',
                         options=[{'label': j, 'value': j} for j in input_options],
                         multi=False,
                         placeholder="Enter a City, State"
                        )
        ],
            width={'size': 12, 'offset': 0},
            style={'backgroundColor': rgba},
            align='center'
        ),
        
    ], no_gutters=True, justify='center'),
    
    # Row 3
    dbc.Row([
        
        # Row 3, Column 1 -- A blank gutter
        dbc.Col([
        ],
            style={'height': '2vh', 'backgroundColor': rgba}
        )
        
    ], no_gutters=True, justify='center'),
    
    # Row 4
    dbc.Row([
        
        # Row 4, Column 1 -- Text of selected city, state
        dbc.Col([
            html.Div([html.H3(id='output_container')])
        ],
            width={'size': 12, 'offset': 0},
            style={'backgroundColor': rgba},
            align='left'
        ),        
        
    ], no_gutters=True, align='center', justify='center'),
    
    # Row 5
    dbc.Row([
        
        # Row 5, Column 1 -- A blank gutter
        dbc.Col([
        ],
            style={'height': '2vh', 'backgroundColor': rgba}
        )
        
    ], no_gutters=True, justify='center'),
    
    # Row 6
    dbc.Row([
        
        # Row 6, Column 1 -- The Migration Report Table
        dbc.Col([       
            dcc.Graph(id='report_table',
                      figure={},
                      responsive=True,
                      style={'min-height': '5vh', 'top': '50%', 'left': '50%', 'backgroundColor': rgba}
                     ),
        ],
            width={'size': 11, 'offset': 0},
            style={'min-height': '5vh', 'backgroundColor': rgba}
        ),
        
    ], no_gutters=True, align='center', justify='center'),
    
    
    # Row 7
    dbc.Row([
        
        # Row 7, Column 1 -- Test text
        dbc.Col([
            html.Div([html.H3('Test text')])
        ],
            style={'height': '2vh', 'backgroundColor': rgba}
        )
        
    ], no_gutters=True),
    
], fluid=True, style={'backgroundColor': rgba})


# ------------------------------------------------------------------------------
# Connect the Plotly graphs with Dash Components
@app.callback([
    Output(component_id='report_table', component_property='figure'),
    Output(component_id='output_container', component_property='children')], 
    [Input(component_id='select_citystate', component_property='value')])
def update_graph(selected_citystate):
    
    ##################################################
    ##### Do Data Transformation and Display Fig #####
    ##################################################
    
    if len(df) > 0:
        output_container = 'Displaying recent reports near {}.'.format(selected_citystate)
    else:
        output_container = "Sorry, there are no recent reports near here.".format(selected_citystate)

    return fig, output_container


# ------------------------------------------------------------------------------
if __name__ == '__main__':
    app.run_server()

标签： pythonplotlyplotly-dashdash-bootstrap-components