I am currently working on a project where I have integrated a plotly-dash app into Django using the django-plotly-dash package. After conducting various tests and ensuring everything is functioning correctly, I noticed that a double scrollbar appears when the dash app is inserted. Here is an overview of my code:
base.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Dash App</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
dashboard.html
{% extends 'base.html' %}
{% load plotly_dash %}
{% block content %}
<div class="{% plotly_class name='dash-app' %}" style="height: 100%; width: 100%;">
{% plotly_app name="dash-app" ratio=1 %}
</div>
{% endblock %}
Here you can see the issue with the double scrollbar.
Does anyone have any suggestions on how to remove one of the scrollbars so that the embedded app aligns with the browser page?