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 library
  • plotly_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.

Back to Top