django_plotly_dash：div 标签搞乱了仪表板的渲染答案

【问题标题】：django_plotly_dash: div tag is messing up rendering of dashboarddjango_plotly_dash：div 标签搞乱了仪表板的渲染
【发布时间】：2023-02-05 01:37:58
【问题描述】：

我正在使用 django_plotly_dash 在 django 模板中呈现仪表板（从文档中，仪表板可以集成为 iframe 或页面的 DOM 元素。我选择了 iframe 道路。

仪表板从不在页面上全屏显示。它被卡在一个小窗口上。

查看浏览器中的开发工具，我发现是哪个 div 元素导致了问题，但是，我不知道它来自哪里，因为它在我的代码中无处可寻。

这是我的代码：

{% 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>

但是现在，这里是使用工具的源代码的样子：

                <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>

在模板中我的 django dash 应用程序的声明和 iframe 的呈现之间有一个带有 css 的 div 标签。有人知道它来自哪里吗？

我猜这可能是 django dash 的问题，在这种情况下，如何覆盖该 css 属性？

编辑：我去 django plotly dash 的 github 中搜索，这是导致问题的函数：

@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()

看来我需要找到一种方法来使用 istyle 而不是 dstyle

【问题讨论】：

标签： html css django plotly-dash

【解决方案1】：

plotly_app 模板标签按照 plotly_app.html 中的定义展开：

<div style="{{dstyle}}">
  <iframe src="{{app.base_url}}" style="{{istyle}}" frameborder="{{fbs}}" sandbox="{{sandbox_settings}}"></iframe>
</div>

您可能只想注释掉外部 div。您也可以尝试使用另一个模板，即。 :

plotly_app_bootstrap，用于使用 Bootstrap 库的响应式布局
plotly_direct，允许直接将 html 插入到模板中，而不是将其嵌入到 iframe 中。

我建议在没有任何额外样式的情况下尝试使用不同的模板，然后在必要时最终添加它们（特别是那些你在外部 div 中添加的模板）。

【讨论】：