Quantcast
Channel: 🎛️ Dash - Plotly Community Forum
Viewing all articles
Browse latest Browse all 6271

How can I place text area, datatables and other interactive elements inside Accordion?

$
0
0

In the app.layout below, I am trying to incorporate related, interactive elements like text area and a datatable inside the AccordionItem tags. But I keep receiving this error message:

    )
    ^
SyntaxError: positional argument follows keyword argument

I tried to bold the line in the code pasted below causing the error message, but that does not work. Specifically, it is line numbers 25-26 which I capitalized and separated from the rest of the code with a line space. If I remove the “),” causing the error message, it returns but in reference to the “]” at line number 38-39.

Can someone please explain what is wrong and how to resolve the issue?

The information I find online talks about this error message as it pertains to Python functions, not Dash app layouts. And I am trying to insert a text area into an Accordion item. Perhaps I am not looking in the right place, but I am also not finding the question answered on this forum.

Thank you very much for reviewing my question.

external_stylesheets=[dbc.themes.SUPERHERO]

app = dash.Dash(external_stylesheets=external_stylesheets)

app.layout = html.Div(
    [ html.Br(), 
      html.H5("Welcome to the Ingredible's Nutrition Assistant"),
      html.Br(),

        dbc.Accordion(
            [
                dbc.AccordionItem(
                    "This is the content of the first section",
                    title="Step 1",
                    item_id="acc_textarea",
                    html.Br(), html.Br(),
                    html.Label("Please paste your recipe here."),
                    dcc.Textarea(id='recipe-textarea',
                        value='',
                        style={'width': '80%', 'height':500},
                        placeholder='Please note: All information in brackets or parantheses will be deleted.'),
                    html.Br(), html.Br(),
                    html.Button('Submit Recipe', id='recipe-textarea-submit-button', n_clicks=0),
                    html.Br(), html.Br(),

                    HTML.DIV(ID="MSG"),
This is the line that seems to be causing the problem:   
                     ), 

                  dbc.AccordionItem(
                    "This is the content of the second section",
                    title="Item 2",
                    item_id="acc_datatable",
                ),
                dbc.AccordionItem(
                    "This is the content of the third section",
                    title="Item 3",
                    item_id="acc_report",
                ),
            ],
            id="accordion",
            active_item="acc_textarea",
        ),
        html.Div(id="accordion-contents", className="mt-3"),
    ]
)

@app.callback(
    Output("accordion-contents", "children"),
    [Input("accordion", "active_item")],
)
def change_item(item):
    return f"Item selected: {item}"

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

2 posts - 2 participants

Read full topic


Viewing all articles
Browse latest Browse all 6271

Latest Images

Trending Articles



Latest Images