Hello All,
Can anyone please help me with this. I have created 4 buttons in the cardheader and there are four CardBody each for a Card.
But when I try to expand the cardbody by pressing cardheader button the data overlaps with another collapse.
In short the CardBody is not expanding according to the data.
Some Bootstrap class is missing or not working.
My set up:
external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’,
{
'href': 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css',
'rel': 'stylesheet',
'integrity': 'sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO',
'crossorigin': 'anonymous'
}
]
external_scripts = [
‘https://www.google-analytics.com/analytics.js’,
{‘src’: ‘https://cdn.polyfill.io/v2/polyfill.min.js’},
{
‘src’: ‘https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.core.js’,
‘integrity’: ‘sha256-Qqd/EfdABZUcAxjOkMi8eGEivtdTkh3b65xCZL4qAQA=’,
‘crossorigin’: ‘anonymous’
}
]
meta_tags=[
{“name”: “viewport”, “content”: “width=device-width, initial-scale=1”},
{'http-equiv': 'X-UA-Compatible', 'content': 'IE=edge' },
]
app = dash.Dash( name ,external_stylesheets=external_stylesheets,external_scripts=external_scripts,meta_tags=meta_tags)
app.scripts.config.serve_locally=False
server=app.server
app.config[‘suppress_callback_exceptions’] = True
also My code:
df= pd.read_sql(sql,connection)
table = dbc.Table.from_dataframe(df,bordered=True,dark=True)
app.layout =html.Div([
dbc.Card([
dbc.Button(
dbc.CardHeader(‘Testing1’),id=“button-0”,style={‘width’:‘30px’}),
dbc.Collapse(
dbc.CardBody(table),id=“collapse-0”,style={‘marginTop’:‘1%’})
]),
dbc.Card([
dbc.Button(
dbc.CardHeader(‘Testing2’),id=“button-1”,style={‘width’:‘30px’}),
dbc.Collapse(
dbc.CardBody(table,className=“card-body”),id=“collapse-1”,style={‘marginTop’:‘1%’})
]),
dbc.Card([
dbc.Button(
dbc.CardHeader(‘Testing3’),id=“button-2”,style={‘width’:‘30px’}),
dbc.Collapse(
dbc.CardBody(table),id=“collapse-2”,style={‘marginTop’:‘1%’})
])
])
@app.callback([Output(f"collapse-{i}",“is_open”) for i in range(0,3)],
[Input(f’button-{i}’,“n_clicks”) for i in range(0,3)],
[State(f"collapse-{i}",“is_open”) for i in range(0,3)])
def load(*args):
ctx=dash.callback_context
if not ctx.triggered:
return “”
else:
btn_id = ctx.triggered[0][“prop_id”].split(".")[0]
i=int(btn_id.split("-")[1])
state = args[-3:]
click =args[0:3]
if click[i]:
return [s if j != i else not s for j,s in enumerate(state)]
else:
initial_return=[]
for i in range(0,3):
initial_return.append(False)
return initial_return
if ( name ==“ main ”):
app.run_server(debug=True,port=8091)
see the snapshot
how can I make these divs to expand according to the data rows that are going to load from the system
Thanks in advance!!!