Hello community. How does someone add ClassName property to <body> tag in dash?
Hello @Gaylord,
The only way to do this is via a JavaScript function, a clientside callback can handle it.
If you use pages:
app.clientside_callback(
âââfunction (n) {
document.body.classList.add(âmycustomclassâ)
return window.dash_clientside.no_update
}âââ,
Output(â_pages_contentâ,âidâ),
Input(â_pages_contentâ,âidâ)
)
Or⌠you could mess with the template. Though I wouldnât recommend this.
I wish Dash would just easily let you add attributes to the body. Itâs not an uncommon thing.
I played with this a little bit and I found the most straightforward way is to just replace the '<body>'
string in app.index_string. Little hacky but works:
mybody = '<body class="customclass1 customclass2">'
app.index_string = app.index_string.replace('<body>', mybody)
print(app.index_string)
<!DOCTYPE html>
<html>
<head>
{%metas%}
<title>{%title%}</title>
{%favicon%}
{%css%}
</head>
<body class="customclass1 customclass2">
<!--[if IE]><script>
alert("Dash v2.7+ does not support Internet Explorer. Please use a newer browser.");
</script><![endif]-->
{%app_entry%}
<footer>
{%config%}
{%scripts%}
{%renderer%}
</footer>
</body>
</html>
1 Like