Zero-width column in a row

Dash Python
1

Hello!
In multi-page dash app i’m making a page that will display a different number of dash DataTables. A total of 10 is possible. I do this through a dbc.Row with dbc.Col.

The check_df function checks if there is data and creates a table, if not, it returns a zero-width div. But when an empty html.Div is received, the column has a non-zero width and takes up space.

Code:

from dash import dcc, html, Input, Output, callback, dash_table
import dash_bootstrap_components as dbc
import settings, styles

autorefresh = settings.page_queue_refresh_sec
style_for_link = settings.link_style_active(settings.columns_queue)
style_for_names = styles.color_for_names_screen
style_columns_width = settings.all_columns_width_screen

layout = html.Div(
    [
        html.H6(id='time_update_1', style={'font-size': '30px'}),
        html.Hr(),
        dcc.Interval(
            id='interval-component',
            interval=autorefresh / 60 * 60000,
            n_intervals=0
        ),
        dbc.Row(
            [
                dbc.Col(id='data_1', width='auto'),
                dbc.Col(id='data_2', width='auto'),
                dbc.Col(id='data_3', width='auto'),
                dbc.Col(id='data_4', width='auto'),
                dbc.Col(id='data_5', width='auto'),
                dbc.Col(id='data_6', width='auto'),
                dbc.Col(id='data_7', width='auto'),
                dbc.Col(id='data_8', width='auto'),
                dbc.Col(id='data_9', width='auto'),
                dbc.Col(id='data_10', width='auto'),
            ]
        ),
    ],
    style={
        'width': '8000px',
        'white-space': 'normal'
    }
)

switch_case = {
    0: 'Name0',
    1: 'Name1',
    2: 'Name2',
    3: 'Name3',
    4: 'Name4',
    5: 'Name5',
    6: 'Name6',
    7: 'Name7',
    8: 'Name8',
    9: 'Name9',
}


def check_df(dataframe, case):
    if dataframe.empty:
        return html.Div([''], style={'width': '0', 'height': '0', 'padding': '0'})
    else:
        table = html.Div([html.H5('{}'.format(switch_case[case]), style=style_for_names),
                          dash_table.DataTable(dataframe.to_dict('records'),
                                               style_cell={'text-align': 'center', 'margin-bottom': '0',
                                                           'font-family': 'sans-serif',
                                                           'font-size': '30px',
                                                           'height': 'auto',
                                                           'whiteSpace': 'normal'
                                                           },
                                               columns=style_for_link,
                                               style_cell_conditional=style_columns_width,
                                               fill_width=False,
                                               css=[dict(selector="p", rule="margin: 10px; text-align: center")],
                                               style_table={'overflowX': 'auto'}
                                               )])
        return table


from pages import page1


@callback(
    Output('time_update_1', 'children'),
    Output('data_1', 'children'),
    Output('data_2', 'children'),
    Output('data_3', 'children'),
    Output('data_4', 'children'),
    Output('data_5', 'children'),
    Output('data_6', 'children'),
    Output('data_7', 'children'),
    Output('data_8', 'children'),
    Output('data_9', 'children'),
    Output('data_10', 'children'),
    Input('interval-component', 'n_intervals'),
)
def update_data(n_intervals):
    list_of_df = page1.dataframe()
    return list_of_df[10], \
           check_df(list_of_df[0], 0), \
           check_df(list_of_df[1], 1), \
           check_df(list_of_df[2], 2), \
           check_df(list_of_df[3], 3), \
           check_df(list_of_df[4], 4), \
           check_df(list_of_df[5], 5), \
           check_df(list_of_df[6], 6), \
           check_df(list_of_df[7], 7), \
           check_df(list_of_df[8], 8), \
           check_df(list_of_df[9], 9)

The first screenshot is the distance between tables 2 and 3.
Screen Shot 2023-03-02 at 18.33.15

The second screenshot is the distance between tables 4 and 7, i.e. instead of tables 5 and 6 an empty html.Div is inserted.
Screen Shot 2023-03-02 at 18.33.45

I want to make that this distance is the same.
Can you please tell me what can be done so that an empty column does not take up any width?

2

HI @giga, it’s actually not a answer to your question but if you create your content dynamically, why don’t you return the dbc.Row() with the dbc.Col() you need in the callback?

You could also return a list of dbc.Col() as children of the dbc.Row()

1 Like
3

Thanks, it works!

1 Like