Hi Tom,
many thanks for your response.
At the beginning I am trying to use your simpler solution. Please see below parts of my code:
app.layout = html.Div([
dcc.Location(id='url', refresh=False),
sidebar,
html.Div(id='page-content', children=[], className='main')
],
className='wrapper',
id='main-layout-div'
)
app.clientside_callback(
"""
function(id) {
feather.replace();
return window.dash_clientside.no_update
}
""",
Output("main-layout-div", "className"),
Input("main-layout-div", "id"),
)
Sidebar and page-content includes html elements. For example Sidebar:
sidebar = html.Nav(
[
html.Div(
[
html.A([
html.Span('mySideBar', className='align-middle me-3')
], className='sidebar-brand', href='/'
),
html.Ul(
[
html.Li([
html.A([
html.I('', className='align-middle',
**{
'data-feather':'list'
}
),
html.Span('Summary', className='align-middle'),
],
className='sidebar-link',
href='/apps/myDashboard'
)
], className='sidebar-item'
),
html.Li('Pages', className='sidebar-header'),
html.Li([
html.A([
html.I('', className='align-middle',
**{
'data-feather':'sliders'
}
),
html.Span('Dashboards', className='align-middle'),
html.Span('5', className='badge badge-sidebar-primary'),
],
**{
'data-bs-toggle':'collapse',
'data-bs-target':'#dashboards',
},
className='sidebar-link',
),
html.Ul(
[
html.Li(
[
html.A('myTradesList', className='sidebar-link', href='/apps/myTradesList')
], className="sidebar-item"
)
],
id="dashboards", className='sidebar-dropdown list-unstyled collapse show',
**{'data-bs-parent':'#sidebar'}
)
], className='sidebar-item', #active="exact"
),
], className='sidebar-nav'
)
],
className='sidebar-content js-simplebar',
)
], id="sidebar", className='sidebar',
)
In a generated source code I see:
<script>
var clientside = window.dash_clientside = window.dash_clientside || {};
var ns = clientside["_dashprivate_main-layout-div"] = clientside["_dashprivate_main-layout-div"] || {};
ns["className"] =
function(id) {
feather.replace();
return window.dash_clientside.no_update
}
;
</script>
Unfortunately, I am still missing something or doing some details incorrectly.
I am not sure whether Output(“main-layout-div”, “className”) in clientside_callback is correct.
As I am just starting with dash, usage dash-component-boilerplate is for me really nontrivial.
Kind regards,
Tomas