How to place two dash components next to each other?

I am having trouble getting my table, named ‘graph_table’ in code to be next to my ‘main_graph’.

dash                      1.21.0    
dash-core-components      1.14.1    
dash-html-components      1.1.4

my CSS code:

.wrapper-left {
    margin-right: auto;
    margin-left: -1px;
    max-width: 1250px;
    max-lenght: 100px;
    padding-right: 10px;
    padding-left: 10px;
    margin-top: 32px;

}


.wrapper-right {
   margin-right: -1;
    margin-left: auto;
    max-width: 1250px;
    max-lenght: 100px;
    padding-right: 10px;
    padding-left: 10px;
    margin-top: auto;
}


.card-left {
    left: -80px
    margin-bottom: 24px;
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.18);
}

.card-right {
    left: -80px
    margin-top: 100px;
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.18);
    float: ;
}

.menu {
    height: 112px;
    width: 1590px;
    display: flex;
    justify-content: space-evenly;
    padding-top: 25px;
    margin: -80px auto 0 auto;
    background-color: #FFFFFF;
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.18);
}
.menu-2 {
    height: 150px;
    width: 1590px;
    display: flex;
    justify-content: space-evenly;
    padding-top: 25px;
    margin: -50px auto 0 auto;
    background-color: #FFFFFF;
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.18);
}

For my HTML code, I broke each HTML section into a variable, and put each variable into app layout.

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
import pandas as pd
import numpy as np
from dash.dependencies import Output, Input



app = dash.Dash(__name__)
drop_down_filters = html.Div( #HTML Div 0 , this is "Parent" html.Div, that holders other "childern" html divs
     children=[html.Div("Choose Your Filters: ",className='menu-title-parent'),# where all the other html Div's are being held
        html.Div( #1st HTML Div
            children=[ # What it holds
                html.Div(className='menu-title'),#Sets the menu title of Filter1,and inherits from css menu title
                dcc.Dropdown(        #This is a dropdown from dash core components
                    id = "Filter 1", #For callbacks,Dropdown(dd) menu name is 'Filter 1'
                    options = [{"label": col, "value": col} for col in range(1,10)], #The values the dd holds
                   # className='dropdown', # the css setup it inherits from. determines how it looks
                )
            ]
        ), #end of # 1st HTML Div
        html.Div(# 2nd HTML Div, follows same process as above
            children=[
                html.Div( className='menu-title'),
                dcc.Dropdown(
                    id = "Filter 2", # Sets the menu title of filter2,and inherits from css menut title
                    children = [{"label": col, "value": col} for col in range(1,10)] ,
                   # className='dropdown',
                )
            ]
        ),#end of 2nd Html Div
         html.Div(# 3rd HTML Div, follows same process as above
            children=[
                html.Div(className='menu-title'),
                dcc.Dropdown(
                    id = "Filter 3", # Sets the menu title of filter2,and inherits from css menut title
                    options = [{"label": col, "value": col} for col in range(1,10)],
                   # className='dropdown',
                )
            ]
        ),#end of 3nd Html Div
         html.Div(  # 4th HTML Div, follows same process as above
             children=[
                 html.Div(className='menu-title'),
                 dcc.Dropdown(
                     id="Filter 4",  # Sets the menu title of filter2,and inherits from css menut title
                     options=[{"label": col, "value": col} for col in range(1, 10)],
                  #   className='dropdown',
                 )
             ]
         ),  # end of 4nd Html Di
    ], # End of children list from parent HTML Div #0, or parent HTML Div
   className="menu", #the css setup that parent html inherits from.
)

filter_title = html.Div(
    children= [
        html.Div( "Choose your weapons:",className='menu-title' ),
   ],
    className='menu'
)

d = {'col1': [1, 2], 'col2': [3, 4]}
df = pd.DataFrame(data=d)

drop_down_traces_row1 = html.Div(
    children=[
        html.Div(  # 1st HTML Div
            children=[  # What it holds
                html.Div('Series-1' , className='menu-title'),  # Sets the menu title of Trace1,and inherits from css menu title
                dcc.Dropdown(  # This is a dropdown from dash core components
                    id="series_one",  # For callbacks,Dropdown(dd) menu name is 'Filter 1'
                    options=[{"label": col, "value": col} for col in range(1, 10)],  # The values the dd holds
                    className='dropdown', # the css setup it inherits from. determines how it looks
                )
            ]
        ),#End of HTML #
        html.Div(  # 1st HTML Div
            children=[  # What it holds
                html.Div('Series-2',className='menu-title'),  # Sets the menu title of Filter1,and inherits from css menu title
                dcc.Dropdown(  # This is a dropdown from dash core components
                    id="series_two",  # For callbacks,Dropdown(dd) menu name is 'Filter 1'
                    options=[{"label": col, "value": col} for col in range(1, 10)],  # The values the dd holds
                    className='dropdown', # the css setup it inherits from. determines how it looks
                )
            ]
        ),  # End of HTML #
        html.Div(  # 1st HTML Div
            children=[  # What it holds
                html.Div('Series-three', className='menu-title'),  # Sets the menu title of Filter1,and inherits from css menu title
                dcc.Dropdown(  # This is a dropdown from dash core components
                    id="series_three",  # For callbacks,Dropdown(dd) menu name is 'Filter 1'
                    options=[{"label": col, "value": col} for col in range(1, 10)],  # The values the dd holds
                    className='dropdown', # the css setup it inherits from. determines how it looks
                )
            ]
        ),  # End of HTML #
        html.Div(  # 1st HTML Div
            children=[  # What it holds
                html.Div('Series-4',className='menu-title'),  # Sets the menu title of Filter1,and inherits from css menu title
                dcc.Dropdown(  # This is a dropdown from dash core components
                    id="series_four",  # For callbacks,Dropdown(dd) menu name is 'Filter 1'
                    options=[{"label": col, "value": col} for col in range(1, 10)],  # The values the dd holds
                    className='dropdown', # the css setup it inherits from. determines how it looks
                )
            ]
        ),  # End of HTML #

    ],
    className = 'menu'
)

drop_down_traces_row2 = html.Div(
    children=[
        html.Div(  # 1st HTML Div
            children=[  # What it holds
                html.Div('Series-5',className='menu-title'),  # Sets the menu title of Filter1,and inherits from css menu title
                dcc.Dropdown(  # This is a dropdown from dash core components
                    id="series_5",  # For callbacks,Dropdown(dd) menu name is 'Filter 1'
                    options=[{"label": col, "value": col} for col in range(1, 10)],  # The values the dd holds
                    className='dropdown',  # the css setup it inherits from. determines how it looks
                )
            ]
        ),  # End of HTML #
        html.Div(  # 1st HTML Div
            children=[  # What it holds
                html.Div('Series-6',className='menu-title'),  # Sets the menu title of Filter1,and inherits from css menu title
                dcc.Dropdown(  # This is a dropdown from dash core components
                    id="series_six",  # For callbacks,Dropdown(dd) menu name is 'Filter 1'
                    options=[{"label": col, "value": col} for col in range(1, 10)],  # The values the dd holds
                    className='dropdown',  # the css setup it inherits from. determines how it looks
                )
            ]
        ),  # End of HTML #
        html.Div(  # 1st HTML Div
            children=[  # What it holds
                html.Div('Series-7',className='menu-title'),  # Sets the menu title of Filter1,and inherits from css menu title
                dcc.Dropdown(  # This is a dropdown from dash core components
                    id="series_seven",  # For callbacks,Dropdown(dd) menu name is 'Filter 1'
                    options=[{"label": col, "value": col} for col in range(1, 10)],  # The values the dd holds
                    className='dropdown',  # the css setup it inherits from. determines how it looks
                )
            ]
        ),  # End of HTML #
        html.Div(  # 1st HTML Div
            children=[  # What it holds
                html.Div('Series-8',className='menu-title'),  # Sets the menu title of Filter1,and inherits from css menu title
                dcc.Dropdown(  # This is a dropdown from dash core components
                    id="series_eight",  # For callbacks,Dropdown(dd) menu name is 'Filter 1'
                    options=[{"label": col, "value": col} for col in range(1, 10)],  # The values the dd holds
                    className='dropdown',  # the css setup it inherits from. determines how it looks
                )
            ]
        ),  # End of HTML #

    ],
    className='menu-2'
)

main_graph = html.Div(
    children=[
        html.Div('Graph',className='menu-title'),
        html.Div(
            children=dcc.Graph( id="price-chart",),
            className="card-left",
        ),
        html.Div(
            children= dbc.Table.from_dataframe(df,id='Tabel2'),
            className = "card-right",
        ),
    ],
    className="wrapper-left",
)

graph_table = html.Div(
    children = [
        html.Div('Graph-Table',className='menu-title'),
        html.Div(children=dbc.Table.from_dataframe(df,id='graph_table',bordered=True,striped=True),
        className = "card-left",
        )
    ],
    className='wrapper-right',
)


app.layout = html.Div(
    children=[
        html.Div(
            children=[
                html.H1("Hello World"),
                drop_down_filters,
                filter_title,
                drop_down_traces_row1,
                drop_down_traces_row2,
                main_graph,
                graph_table,
            ]
        ),
    ]
)



if __name__ == "__main__":
    app.run_server(debug=True)

My problem


I need ‘graph-table’ to move next to the graph.

Thank you

I used dbc.Row() and dbc.Col() dbc layout, Not sure if that’s something you looking for.

1 Like

Sorry, but where did you put dbc.Row and dbc.Col?

Thank you

Have a look at https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/. :wink:

Thank you =)