Django_plotly_dash: div tag is messing up rendering of dashboard
I am working with django_plotly_dash to render dashboards within django template (from the doc, the dashboard can either be integrated as an iframe or in the DOM elements of the page. I chose to go the iframe road.
The dashboard nevers takes the full screen on page. it is stucked on a small window.
Looking at the dev tools in my browser, I found which div element is causing the issue, however, I dont know where it is come from because it is nowhere to be found on my code.
here is my code:
{% load plotly_dash %}
<div class="{% plotly_class name='report' %}" style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">
<div style="position:absolute,top:0"> {% plotly_app name='report' initial_arguments=context %}
</div>
</div>
but then now, here is what the source code look like with tools:
<div class="django-plotly-dash django-plotly-dash-iframe django-plotly-dash-app-report" style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">
<div style="position:absolute,top:0">
<div style="
position: relative;
padding-bottom: 10.0%;
height: 0;
overflow:hidden;
">
<iframe src="/django_plotly_dash/app/report/initial/dpd-initial-args-8f2af15363304c6682112b8a6a3fc974/" style="
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
" frameborder="0" sandbox="allow-downloads allow-scripts allow-same-origin"></iframe>
</div>
</div>
</div>
there is a div tag with css between the declaration of my django dash app in template and the rendering of the iframe. Does someone knows where it comes from?
I am guessing it may be something buggy from django dash, in that case, how to override that css property?
EDIT: i went to search in the github of django plotly dash and here is the function causing the issue:
@register.inclusion_tag("django_plotly_dash/plotly_app.html", takes_context=True)
def plotly_app(context, name=None, slug=None, da=None, ratio=0.1, use_frameborder=False, initial_arguments=None):
'Insert a dash application using a html iframe'
fbs = '1' if use_frameborder else '0'
dstyle = """
position: relative;
padding-bottom: %s%%;
height: 0;
overflow:hidden;
""" % (ratio*100)
istyle = """
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
"""
cache_id = store_initial_arguments(context['request'], initial_arguments)
da, app = _locate_daapp(name, slug, da, cache_id=cache_id)
sandbox_settings = SANDBOX_STRING
return locals()
It looks like I need to find a way to use istyle and not dstyle
The plotly_app
template tag expands as defined in plotly_app.html
:
<div style="{{dstyle}}">
<iframe src="{{app.base_url}}" style="{{istyle}}" frameborder="{{fbs}}" sandbox="{{sandbox_settings}}"></iframe>
</div>
You might want to just comment out the outer div. You could also try to use another template, ie. :
plotly_app_bootstrap
, for use with responsive layouts using the Bootstrap libraryplotly_direct
, allows the direct insertion of html into a template, instead of embedding it in an iframe.
I would suggest playing a bit with the different templates without any extra styles, before eventually adding them (specifically those you add in the outer divs) if necessary.