Django_plotly_dash: тег div портит рендеринг приборной панели

Я работаю с 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 есть тег div с css. Кто-нибудь знает, откуда он берется?

Я предполагаю, что это может быть что-то глючное из django dash, в таком случае, как переопределить это свойство css?

EDIT: я поискал в github django plotly dash и вот функция, вызывающая проблему:

@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

Тег шаблона 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'ы), если это необходимо.

Я боролся с этим очень долгое время. Вот что мне помогло:

  • Используйте {% plotly_app_bootstrap name='DashApp' aspect='16by9' initial_arguments=dash %}, что дает внутреннему iframe класс bootstrap .embed-responsive-item
    • .
  • Вложите его в <body> и <div> с этими настройками (я не стал проверять, какие из них важны, я просто рад, что это работает)
  • Переопределить CSS-стиль класса .embed-responsive-item

Код:

{%load plotly_dash%}
<!DOCTYPE html>
<html style="background-color: green; box-sizing: border-box; height: 100%; padding: 0px;">
<head>
    <title>Plotly in Django</title>
    <meta name="viewport" content="width=device-width, initial-scale=0.5">
</head>
  

<body style="
    margin: 0px; 
    /* padding: 10px;  */
    background-color: blue; 
    height: 100vh; 
    overflow-y: hidden !important; 
    box-sizing: border-box;
">
                
  <div style="height: 100%; overflow: hidden;">
    {% plotly_app_bootstrap name='DashApp' aspect='16by9' initial_arguments=dash %}
  </div>


  <style>
    .embed-responsive-item {
      /* Your styles here */
      /* padding: 20px; */
      background-color: red;
      height: 100vh !important;
      width: 100vw !important;
      overflow-y: scroll !important;
      box-sizing: border-box;
    }
  </style>

</body>
</html>

Вернуться на верх