Adding duplicate sidebars

Hello,
Do you guys have any suggestions how I can copy the whole sidebar field(from downtime and reasons to the submit button) to the bottom below the submit button?

this is my code:

controls = dbc.FormGroup(
    [
        dbc.Row([
            dbc.Col(
            html.Div(["Start Time: ", constants.start_date_picker],
                    ),
                ),
            dbc.Col(
                html.Div([constants.start_time_picker])
            )
        ],style={"marginBottom":"0.5em"}),
                dbc.Row([
            dbc.Col(
            html.Div(["End Time: ", constants.end_date_picker]),
                ),
            dbc.Col(
                    constants.end_time_picker
                ),
        ]),
    html.Hr(),
    dbc.Row([
        dbc.Col([
                    html.Div(["Theoretical Cycle Time (in s):"]),
            ]),
        dbc.Col([
                   dcc.Input(id="taktzeit", type="text", persistence=True, required=True),
            ])
    ],style={"marginBottom":"0.5em"}
    ),
    dbc.Row([
        dbc.Col([
                    html.Div(["Theoretical Efficiency (in %)"])
            ]),
        dbc.Col([
                   dcc.Input(id="effizienz", type="text", persistence=True, required=True)
            ])
    ],style={"marginBottom":"0.5em"}),
    html.Hr(),
    dbc.Row([
        dbc.Col([
                    html.Div(["Database"])
            ]),
        dbc.Col([
                    constants.database
            ])
    ],style={"marginBottom":"1em"}),
    dbc.Row([
        dbc.Col([
                    html.Div(["Type"])
            ]),
        dbc.Col([
                    constants.part_type_selection
            ])
    ],style={"marginBottom":"1em"}),
    dbc.Row([
        dbc.Col([
                    html.Div(["Worker Name"])
            ]),
        dbc.Col([
                    constants.worker_selection
            ])
    ],style={"marginBottom":"1em"}),
    dbc.Row([
        dbc.Col([
                    html.Div(["Language"])
            ]),
        dbc.Col([ constants.language])
    ],style={"marginBottom":"0.5em"}),
    html.Hr(),
    dbc.Button(
        id='submit_button',
        n_clicks=0,
        children='Submit',
        color='primary',
        block=True
        ),
    html.Hr(),
    html.Div(id="alert11"),
    html.Div(id="alert12"),
    html.Div(id="alert13"),
    html.Div(id="link1"),
    html.Div(id="link12")
    ]
)

sidebar = html.Div(
    [
        html.H2('Downtime and Reasons', style=constants.TEXT_STYLE),
        html.H3('Parameters', style=constants.TEXT_STYLE),
        html.Hr(),
        controls
    ],
    style=constants.SIDEBAR_STYLE,
)

content = html.Div(
    [
        dcc.Tabs([
            dcc.Tab(label='Report', children=[
                dcc.Store(id="filtered_query_output"),
                html.Div(id="production_numbers", style={"display" : "none"}),
                dcc.Store(id="total_number_of_parts"),
                dcc.Store(id="new_intermediate_values"),
                html.Div(id='produktionsdaten', style={'display': 'none'}),
                html.Div(id='file_dates', style={'display': 'none'}),
                dcc.Store(id="pareto_graph"),
                dcc.Store(id="production_graph"),
                html.Div(id="table1"),
                dcc.Store(id="excel_data11"),
                dcc.Store(id="excel_data12"),
                dcc.Store(id="excel_data13"),
                dcc.Store(id="excel_data_error_log"),
                html.Hr(),
                dbc.Row([
                    dbc.Col([
                        html.Div(children=html.Strong(id='fehler_zahl'))
                    ]),
                    dbc.Col([
                        html.Div(children=html.Strong(id='fehler_dauer'))
                    ]),
                    dbc.Col([
                        html.Div(children=html.Strong(id='verlust_menge'))
                    ])
                ],style={"marginBottom":"0.5em"}),
                dbc.Row([
                    dbc.Col([
                        html.Div(children=html.Strong(id='ok_parts'))
                    ]),
                    dbc.Col([
                        html.Div(children=html.Strong(id='faulty_parts'))
                    ]),
                    dbc.Col([
                        html.Div(children=html.Strong(id='mean_cycle_time'))
                    ])
                ])
            ]),
            dcc.Tab(label='Pareto Diagram', children=[
                dcc.Graph(id="pareto_diagram", style={"height":800}),
            ]),
            dcc.Tab(label='By Station', children=[
                dcc.Graph(id="by_station"),
            ]),
        ]),
    ],
    style=constants.CONTENT_STYLE,
    id="content"
)

layout = html.Div([sidebar, content])

HI @Traxdata
Are you trying to get a bunch of empty space on the top part of the page, and have the bottom part of the page with the side bar? Are you planning to put anything in the top part?

Side note: From Dash Bootstrap version 1.0.0

FormGroup

  • Breaking Dropped FormGroup . It is no longer necessary to use FormGroup to align components in a form. Use Row Col and gutter modifier classes and spacing utilities instead. See the documentation for examples

Hello,
thank you for the reply.I’m looking something like on the picture below,I will just change the names of the parameters.

I made this so far

But I don’t know how to make the downtime and reasons paramaters div below the first submit.

this is my sidebar:

sidebar = html.Div(

[

    html.H2('Downtime and Reasons', style=constants.TEXT_STYLE),

    html.H3('Parameters', style=constants.TEXT_STYLE),

    html.Hr(),

    controls

],

style=constants.SIDEBAR_STYLE,

)

when I make something like

sidebar = html.Div(

    [

        html.H2('Downtime and Reasons', style=constants.TEXT_STYLE),

        html.H3('Parameters', style=constants.TEXT_STYLE),

        html.Hr(),

        controls

    ],

    style=constants.SIDEBAR_STYLE,

),

html.Div(

    [

        html.H2('Parameters', style=constants.TEXT_STYLE),

        html.Hr(),

        controls

    ],

    stlye=constants.SIDEBAR_STYLE,

)

I get the error:

The children property of a component is a list of lists, instead of just a list. Check the component that has the following contents, and remove one of the levels of nesting:

Do you have any suggestions?
Thank you

Hi,

Does wrapping the two divs in another div work?

I added this to my code:

sidebar = html.Div(children=

    [

        html.H2('Downtime and Reasons', style=constants.TEXT_STYLE),

        html.H3('Parameters', style=constants.TEXT_STYLE),

        html.Hr(),

        controls,

        html.H2('Parameters', style=constants.TEXT_STYLE),

        html.Hr(),

        controls,

    ],

    style=constants.SIDEBAR_STYLE,

)

And now I got this:

It duplicated stuff,what I need is:

It looks like controls is written with the two form groups that you wanted to add, therefore the duplication. It should be more like:

sidebar = html.Div(children=

    [

        html.H2('Downtime and Reasons', style=constants.TEXT_STYLE),

        html.H3('Parameters', style=constants.TEXT_STYLE),

        html.Hr(),

        controls0,

        html.H2('Parameters', style=constants.TEXT_STYLE),

        html.Hr(),

        controls1,

    ],

    style=constants.SIDEBAR_STYLE,

)

where control0 and control1 refers to the first and second form group, respectively.

Please also note that you don’t want to replicate controls even if the forms are the same, since it will (try to) assign the same id for two distinct components.

It works! Nice!

I just have a question.Seems like my html elements are wonky.I made the panels work as you suggested.
This is how it looks at the moment.Now I would like to add a scroll next to the submit button just to scroll down the parameters as there will like 8-10 more added.

The code for this is:

sidebar = html.Div(children=#u ovom sidebaru idu svi naslovi za appove

    [

        html.H2('Downtime and Reasons', style=constants.TEXT_STYLE),

        html.H3('Parameters', style=constants.TEXT_STYLE),

        html.Hr(),

        controls0,#mora se definisati controls ovo je za prvi formgroup

        html.H2('Production History Report', style=constants.TEXT_STYLE),

        html.H3('Parameters', style=constants.TEXT_STYLE),

        html.Hr(),

        controls1,#definisana druga formgrupa

        html.H2("Quantity and Scrap", style=constants.TEXT_STYLE),

        html.H3("Parameters", style=constants.TEXT_STYLE),

        html.Hr(),

        controls2#definisana app 3

    ],

    style=constants.SIDEBAR_STYLE,

)

I tried excluding the constants from the style=constants.SIDEBAR_STYLE and to use style=SIDEBAR_STYLE and this is my code:

SIDEBAR_STYLE = {

    "position": "scroll",

    "top": "0",

    "left": "1em",

    "background-color":"#f0f6fb",

    "float": "left",

    "width": "650px"

}

With that I got the picture below.Now all the all the letters seems to be wonky and it’s not really aligned good as it was in the first picture.The scroll button is the global one on the right side.Do you have any suggestions how I can just add the srcoll bar nexto to the submit button?And to realign the text?Can you elaborate the constants function?

What exactly is the “wonkiness” of the text alignment? I can’t see any big differences…

As for the scrollbar, I guess the old css trick of changing directions in the parent and child divs, as better explained here.

I will try the sidebar trick and reply here,for now this are they key differences from the first picture and the second one regarding the adjusting the html/css elements:
1.On the first one you can see the line below the parameters is not aligned like in the first pic.
2.The Start time and the end time is not aligned like in the firts picture,they are bit too left and there is no spacing like in the first picture.
3.The submit button is streched till the end of the div but on the first picture it has some spacing near the edge.

I’m asking all this as I’m a little bad with the front end stuff,as I work full stack I have no one other to ask.

Ok, I see… It looks like you are missing a bit of padding in the sidebar div, both horizontally and vertically. Not sure how much though, but it should be easy to test it out.

Hi, the padding works great! Thank you.I didn’t understand the scroll bar and I will leave it for later.

This is my working code with the html corrections for the side bar:

SIDEBAR_STYLE = {
    "overflow": "scroll",
    "top": "0",
    "left": "1em",
    "background-color":"#f0f6fb",
    "float": "left",
    "width": "650px",
    "padding": "2rem 1rem"# mozemo smanjivati,ako je previse ili premalo
}

Thank you for the help!
This is how I made my bar srcoll work:

SIDEBAR_STYLE = {
    "overflow": "scroll",
    "top": "0",
    "left": "1em",
    "background-color":"#f0f6fb",
    "float": "left",
    "width": "650px",
    "padding": "2rem 1rem"
    "height" : "1500px"
}