How to remove the Dash app scroll bar when implementing onto a web framework?

Dash Python
1

Greetings, I have added my Dash app onto a simple Django website to check for functionality. I’m not much of a front-end expert, perhaps some of you already solved this problem and could also provide some solid tips for using Dash in Django (I used the django_dash_plotly library).

The first thing I want to fix is removing the extra scroll bar that comes with the Dash App, look at the far right:

image
image1210×795 35.5 KB

I only want one scrollbar for my entire Django website. How can I expand the Dash app to use all of the width and height possible? I have set both to 100% {height:width}. Basically, integrating the full app onto the page, I don’t want the app dashboard and django to be fighting eachother when a user wants to scroll.

Pretty stuck on this one!

This is my index.html code where I load the dash app module:

{% extends 'base.html' %}


{% block page_content %}
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h1 class="mt-5">A Bootstrap 4 Starter Template</h1>
        <p class="lead">Complete with pre-defined file paths and responsive navigation!</p>
        <ul class="list-unstyled">
          <li>Bootstrap 4.5.0</li>
          <li>jQuery 3.5.1</li>
        </ul>
      </div>
    </div>
  </div>
  {% load plotly_dash %}
  <div class= "{% plotly_class name='StockBuckets' %} card" style="height: 100%; width: 100%">
    {% plotly_app name='StockBuckets' ratio=0.65 %} 
    

  </div>
{% endblock %}
1 Like
2

I fixed the issue, {% plotly_app name='StockBuckets' ratio=0.65 %} adjusting the ratio to 1 will solve it.

1 Like
3

I have the exact same problem as you but setting ratio=1 is not solving the problem for me. Can you post the base.html you are extending your app to so that I can check if there are any differences from mine? Also, do you have any video or tutorial you followed in order to have your dash app embeded on django? @andres1

EDIT: I managed to solve my problem. For anyone struggling with it, I solved it by using the plotly_direct tag instead of the plotly_app one. This way, I got rid of the <iframe> element which was the one causing the problem. You can read more about it here.

4

this fixed my problem of the slider I made always being too large for the container.

5

how can you access data using plotly_direct while we can not use the initial_argument to get the data @Luiscri