简体   繁体   中英

How to remove whitespace between dash dbc items?

I've been working on a dashboard for some time now and have been unable to remove a pretty large piece of whitespace between one dbc.Row element (containing two columns) and the next dcc.markdown element. If you look at the image below (zoomed out the proportions look a little funny), you'll see the enormous piece of whitespace I can't seem to remove.

在此处输入图像描述

I've tried all sorts of things to get rid of it including a combination of the following attributes style={'margin-bottom': '1em'}, className="h-5", no_gutters=True but nothing seems to work. Is it possible, that Dash is applying some sort of page break that I'm unaware of?

My code looks as follows:

    dbc.Row([dbc.Col(dcc.Graph(id='table1', figure=
                go.Figure(data=[go.Table(header=dict(values=['Accumulated Performance','(gross, in %)']),
                        cells=dict(values=[a, b]))],
                        layout=go.Layout(margin={'t': 25, 'b': 5, 'l': 10, 'r': 25}
                        )))
                             ),
                     dbc.Col(dcc.Graph(id='table2', figure=
                        go.Figure(data=[go.Table(header=dict(values=['Selected Risk Metrics', '']),
                        cells=dict(values=[['Sharpe Ratio 1-y','Volatility 1-y','Information Ratio 1-y',
                                            'Max 1-m drawdown (since inception)'],
                                           ['Value', 'Value', 'Value', 'Value']]))],
                        layout=go.Layout(margin={'t': 25, 'b': 5, 'l': 10, 'r': 25},
                        )))
                             )
                     ], style={'margin-bottom': '1em'}, className="h-5", no_gutters=True),

            dcc.Markdown('''
            #### Investment Philosophy
            
            Include some text describing my investment philosophy.  
            '''),

            dcc.Graph(id='indexed_return_graph')

I needed to add a style argument to the code style={'height': '175px'} for each of the two columns.

dbc.Row([
        dbc.Col(dcc.Graph(id='table1', figure=
            go.Figure(data=[go.Table(header=dict(values=['Accumulated Performance','(gross, in %)']),
            cells=dict(values=[a, b]))],
            layout=go.Layout(margin={'t': 5, 'b': 0, 'l': 10, 'r': 0, 'pad':10}
            )), style={'height': '175px'})),
        
        dbc.Col(dcc.Graph(id='table2', figure=
            go.Figure(data=[go.Table(header=dict(values=['Selected Risk Metrics', '']),
            cells=dict(values=[['Sharpe Ratio 1-y','Volatility 1-y','Information Ratio 1-y',
            'Max 1-m drawdown (since inception)'],
            ['Value', 'Value', 'Value', 'Value']]))],
            layout=go.Layout(margin={'t': 5, 'b': 0, 'l': 10, 'r': 0, 'pad':10}
            )), style={'height': '175px'}))
         ])

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM