Align columns inside Tab

Dash Python
1

Hi

I’m trying to align the two columns inside a tab to remove the whitespace seen in attached image between dropdown and graph. When viewed on a normal screen they align great, but not on a large screen.

Here is my code:

dropdown3 = html.Div(
    [
        dbc.Row(
            [
                dbc.Col(html.H6("""Select y-axis"""), width='80%'),
                dcc.Dropdown(
                    id='y', value="cv_accuracy_top", clearable=False, searchable=False,
                    options=[
                        {"label": "CV", "value": "cv_accuracy_top"},
                        {"label": "Solr", "value": "solr_cv_accuracy_top"},
                        {"label": "Combi", "value": "combined_cv_accuracy_top"},
                        {"label": "MAP", "value": "document_map_top"}
                    ],
                    placeholder=" ",
                    style={
                        # 'width': '80%',
                        'verticalAlign': 'top'
                    }
                )
            ], className="g-0", align="center", justify='start'),
    ],
    style=dict(
        display='flex',
        verticalAlign="middle",
        # width='90%'
    )
)

dbc.Container(fluid=True, children=[
        html.Div([dcc.Store(id="store"),  # this is the store that holds the data
                  html.Div(id="onload"),  # this div is used to trigger the query_df function on page load
                  html.Div(id="log")]),
        # Top
        html.H1(config.name, id="nav-pills"),
        navbar,
        html.Br(), html.Br(), html.Br(),

        # Body
        dbc.Row([
            # input + panel
            dbc.Col(md=3, children=[
                html.H4("Select Knowledge Base"),
                dropdown1,
                html.Br(), html.Br(), html.Br(),
                html.Div(id="output-panel")
            ]),
            # plots
            dbc.Col(md=9, children=[
                html.H4("Select Model Trend"),
                dropdown2,
                dbc.Tabs(style={"margin-top": "5px"}, className="nav nav-pills", children=[
                    dbc.Tab(dcc.Graph(id="plot-table"), label="Production Table"),
                    dbc.Tab(
                        children=dbc.Row(
                            [
                                dbc.Col(dropdown3, style={'margin-left': 0}),
                                dbc.Col(dcc.Graph(id="plot-CV-top3"), style={'margin-left': 0})
                            ],
                            className="g-0", align="center", justify='start'), label="Top 3 Accuracy"
                    )
                ])
            ])
        ])
    ])

Screenshot 2022-05-12 at 13.58.53
Screenshot 2022-05-12 at 13.58.532397×907 117 KB

I expect both columns to align to the left, instead the graph is moving to the right.

2

@adamschroeder, can you help on this one?

3

Hi @MotzWanted
Unfortunately, I couldn’t run your code and test it out on my computer since it’s not executable. You don’t provide the navbar and the other dropdowns. But what you’re looking for might be solvable with the chapter: " Specify width for different screen sizes". This is in the layout component section of dbc.

For example:

        dbc.Row(
            [
                dbc.Col(html.Div("One of four columns"), width=6, lg=3, md=12),
                dbc.Col(html.Div("One of four columns"), width=6, lg=3, md=12),
                dbc.Col(html.Div("One of four columns"), width=6, lg=3, md=12),
                dbc.Col(html.Div("One of four columns"), width=6, lg=3, md=12),
            ]

In the above code, if the app is viewed on a large screen, the four Divs will appear on one row (3*4=12 columns wide). However, on a medium screen, each Div will appear on a separate row because each Div would take up 12 columns of width.

4

Hi @adamschroeder,

Thanks for you quick response. The layout on a medium screen is perfect. The three div is viewed on one row. I want the same to happen on a large screen but without the white space seen in above image.

I here provide you the full code:

def serve_layout():
    global db
    db = DatasetBuilder(dset_type=dset_type)
    db.get_data()
    db.get_customers()

    dbc.Nav([
        dbc.NavItem(),
        dbc.NavItem(),
        dbc.DropdownMenu()
    ])

    # Navbar
    navbar = dbc.Nav(className="nav nav-pills", children=[
        # logo/home
        dbc.NavItem(html.Img(src=app.get_asset_url("logo.png"), height="40px")),
        # about
        dbc.NavItem(html.Div([
            dbc.NavLink("About", href="/", id="about-popover", active=False),
            dbc.Popover(id="about", is_open=False, target="about-popover", children=[
                dbc.PopoverHeader("How it works"), dbc.PopoverBody(about.txt)
            ])
        ])),
        # links
        dbc.DropdownMenu(label="Links", nav=True, children=[
            dbc.DropdownMenuItem([html.I(className="fa fa-medium"), "  Analytics"], href=config.analytics,
                                 target="_blank"),
            dbc.DropdownMenuItem([html.I(className="fa fa-github"), "  Code"], href=config.code, target="_blank"),
        ])
    ])

    dropdown1 = dcc.Dropdown(
        id="customer",
        options=[
                    {"label": "All", "value": "All"}] + [
                    {"label": ", ".join([name, str(idx)]), "value": idx} for (name, idx) in db.customers
                ]
        , value="All", clearable=False,
        optionHeight=30)

    dropdown2 = dcc.Dropdown(
        id="trend",
        options=[
                    {"label": "All", "value": "All"}] + [
                    {"label": x.capitalize(), "value": x} for x in ["downwards", "neutral", "upwards"]
                ]
        , value="All", searchable=False, clearable=False,
        optionHeight=30)

    dropdown3 = html.Div(
        [
            dbc.Row(
                [
                    dbc.Col(html.H6("""Select y-axis"""), width='80%'),
                    dcc.Dropdown(
                        id='y', value="cv_accuracy_top", clearable=False, searchable=False,
                        options=[
                            {"label": "CV", "value": "cv_accuracy_top"},
                            {"label": "Solr", "value": "solr_cv_accuracy_top"},
                            {"label": "Combi", "value": "combined_cv_accuracy_top"},
                            {"label": "MAP", "value": "document_map_top"}
                        ],
                        placeholder=" ",
                        style={
                            # 'width': '80%',
                            'verticalAlign': 'top'
                        }
                    )
                ], className="g-0", align="center", justify='start'),
        ],
        style=dict(
            display='flex',
            verticalAlign="middle",
            # width='90%'
        )
    )

    return dbc.Container(fluid=True, children=[
        html.Div([dcc.Store(id="store"),  # this is the store that holds the data
                  html.Div(id="onload"),  # this div is used to trigger the query_df function on page load
                  html.Div(id="log")]),
        # Top
        html.H1(config.name, id="nav-pills"),
        navbar,
        html.Br(), html.Br(), html.Br(),

        # Body
        dbc.Row([
            # input + panel
            dbc.Col(md=3, children=[
                html.H4("Select Knowledge Base"),
                dropdown1,
                html.Br(), html.Br(), html.Br(),
                html.Div(id="output-panel")
            ]),
            # plots
            dbc.Col(md=9, children=[
                html.H4("Select Model Trend"),
                dropdown2,
                dbc.Tabs(style={"margin-top": "5px"}, className="nav nav-pills", children=[
                    dbc.Tab(dcc.Graph(id="plot-table"), label="Production Table"),
                    dbc.Tab(dcc.Graph(id='plot-production-scatter'), label="Production Scatter"),
                    dbc.Tab(
                        children=dbc.Row(
                            [
                                dbc.Col(dropdown3, style={'margin-left': 0}),
                                dbc.Col(dcc.Graph(id="plot-CV-top3"), style={'margin-left': 0})
                            ],
                            className="g-0", align="center", justify='start'), label="Top 3 Accuracy"
                    )
                ])
            ])
        ])
    ])
5

hi @MotzWanted
your code contains elements that I don’t have access to, such as config, DatasetBuilder. That is why you’re code is not executable. However, I removed what I could and got this:

import pandas as pd
import plotly.graph_objects as go
import plotly.express as px
import dash_bootstrap_components as dbc
from dash import Dash, dcc, html, callback, Output, Input

d = {
    'num' : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
    'label' : ['A', 'A', 'A', 'A', 'A', 'A', 'B', 'B', 'B', 'B', 'C', 'C', 'D', 'D', 'D', 'D'],
    'color' : ['red', 'blue', 'green', 'red', 'blue', 'green', 'blue', 'green', 'red', 'green', 'red', 'blue', 'red', 'blue', 'green', 'blue'],
    'value' : [0.4, 0.2, 0.3, 0.6, 0.7, 0.4, 0.2, 0.4, 0.4, 0.2, 0.1, 0.3, 0.8, 0.4, 0.6, 0.5]
    }

# Build dataframe
df = pd.DataFrame(data=d)

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

def serve_layout():
    global d

    dbc.Nav([
        dbc.NavItem(),
        dbc.NavItem(),
        dbc.DropdownMenu()
    ])

    # Navbar
    navbar = dbc.Nav(className="nav nav-pills", children=[
        # logo/home
        dbc.NavItem(html.Img(src=app.get_asset_url("logo.png"), height="40px")),
        # about
        dbc.NavItem(html.Div([
            dbc.NavLink("About", href="/", id="about-popover", active=False),
            dbc.Popover(id="about", is_open=False, target="about-popover", children=[
                dbc.PopoverHeader("How it works"), dbc.PopoverBody("some text")
            ])
        ])),
        # links
        dbc.DropdownMenu(label="Links", nav=True, children=[
            dbc.DropdownMenuItem([html.I(className="fa fa-medium"), "  Analytics"],
                                 target="_blank"),
            dbc.DropdownMenuItem([html.I(className="fa fa-github"), "  Code"], target="_blank"),
        ])
    ])

    dropdown1 = dcc.Dropdown(
        id="customer",
        options=[
                    {"label": "All", "value": "All"}]
        , value="All", clearable=False,
        optionHeight=30)

    dropdown2 = dcc.Dropdown(
        id="trend",
        options=[
                    {"label": "All", "value": "All"}] + [
                    {"label": x.capitalize(), "value": x} for x in ["downwards", "neutral", "upwards"]
                ]
        , value="All", searchable=False, clearable=False,
        optionHeight=30)

    dropdown3 = html.Div(
        [
            dbc.Row(
                [
                    dbc.Col(html.H6("""Select y-axis"""), width='80%'),
                    dcc.Dropdown(
                        id='y', value="cv_accuracy_top", clearable=False, searchable=False,
                        options=[
                            {"label": "CV", "value": "cv_accuracy_top"},
                            {"label": "Solr", "value": "solr_cv_accuracy_top"},
                            {"label": "Combi", "value": "combined_cv_accuracy_top"},
                            {"label": "MAP", "value": "document_map_top"}
                        ],
                        placeholder=" ",
                        style={
                            # 'width': '80%',
                            'verticalAlign': 'top'
                        }
                    )
                ], className="g-0", align="center", justify='start'),
        ],
        style=dict(
            display='flex',
            verticalAlign="middle",
            # width='90%'
        )
    )

    return dbc.Container(fluid=True, children=[
        html.Div([dcc.Store(id="store"),  # this is the store that holds the data
                  html.Div(id="onload"),  # this div is used to trigger the query_df function on page load
                  html.Div(id="log")]),
        # Top
        html.H1("name is here", id="nav-pills"),
        navbar,
        html.Br(), html.Br(), html.Br(),

        # Body
        dbc.Row([
            # input + panel
            dbc.Col(md=3, children=[
                html.H4("Select Knowledge Base"),
                dropdown1,
                html.Br(), html.Br(), html.Br(),
                html.Div(id="output-panel")
            ]),
            # plots
            dbc.Col(md=9, children=[
                html.H4("Select Model Trend"),
                dropdown2,
                dbc.Tabs(style={"margin-top": "5px"}, className="nav nav-pills", children=[
                    dbc.Tab(dcc.Graph(id="plot-table"), label="Production Table"),
                    dbc.Tab(dcc.Graph(id='plot-production-scatter'), label="Production Scatter"),
                    dbc.Tab(
                        children=dbc.Row(
                            [
                                dbc.Col(dropdown3, style={'margin-left': 0}),
                                dbc.Col(dcc.Graph(id="plot-CV-top3"), style={'margin-left': 0})
                            ],
                            className="g-0", align="center", justify='start'), label="Top 3 Accuracy"
                    )
                ])
            ])
        ])
    ])

app.layout = serve_layout()

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

Resulting in this image on a large screen:

image
image3840×2400 209 KB

And this image on a medium screen:

image
image3840×2400 198 KB

Which white space do you want to remove in the large screen? Can you please clarify or providing an illustration?