# Dashboard only visible at the top of the website in a Django project

**URL:** <https://community.plotly.com/t/dashboard-only-visible-at-the-top-of-the-website-in-a-django-project/72875>\
**Category:** Dash Python\
**Tags:** question\
**Created:** [February 20, 2023, 1:23pm UTC](https://community.plotly.com/t/dashboard-only-visible-at-the-top-of-the-website-in-a-django-project/72875 "2023-02-20T13:23:21Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![luuk2205](https://avatars.discourse-cdn.com/v4/letter/l/71c47a/32.png) [@luuk2205](https://community.plotly.com/u/luuk2205)\
**Post date:** [February 20, 2023, 1:23pm UTC](https://community.plotly.com/t/dashboard-only-visible-at-the-top-of-the-website-in-a-django-project/72875/1 "2023-02-20T13:23:21Z")

</div>

Hello,

I am trying to learn plotly, dash an django by building a dashboard to visualise data of weather stations in Germany and I am trying to host the dashboard using django.

When I run the dashboard the dashboard looks like this:  
`python dwd_dashboard.py`

 ![Screenshot 2023-02-20 at 14.09.05](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/1/f/1f75262110a3811395f99df0add5bf073e41a534.jpeg)

The image above is the expected behaviour but when I run:

`python manage.py runserver`  
127.0.0.1:8000/dash\_app

 ![Screenshot 2023-02-20 at 14.11.26](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/0/9/09702ea16555a316783d0494ca179b6b7e6a4e7c.png)  
 ![Screenshot 2023-02-20 at 14.11.05](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/b/5/b571fd9d7eb01f87cc36ff763e50a000e2c9892b.jpeg)

The dashboard is now only visible at the top of the page and I have to scroll down to see the rest of the dashboard.

I’ve tried to add css to dash\_app.html file and to the dash-container  
`app.layout = html.Div(classname="dash-container",children=[])`

Could someone please point me in the right direction? 🙂

Thanks in advance

---

<div class="post-metadata">

**Author:** ![delsim](https://avatars.discourse-cdn.com/v4/letter/d/fbc32d/32.png) [@delsim](https://community.plotly.com/u/delsim)\
**Post date:** [February 20, 2023, 4:08pm UTC](https://community.plotly.com/t/dashboard-only-visible-at-the-top-of-the-website-in-a-django-project/72875/2 "2023-02-20T16:08:32Z")

</div>

If you’re embedding your dashboard into other html (eg by using an iframe) then at some point you have to say how big that embedded object should be. In [django-plotly-dash](https://django-plotly-dash.readthedocs.io/en/latest/template_tags.html) this is achieved through a setting on the template tag used to embed it.

Are you using that package? The default there is set to a 10% height-to-width ratio (which is consistent with the image you have posted). If so, change the `ratio` argument of the template tag to something more appropriate for your dashboard.

---

<div class="post-metadata">

**Author:** ![luuk2205](https://avatars.discourse-cdn.com/v4/letter/l/71c47a/32.png) [@luuk2205](https://community.plotly.com/u/luuk2205)\
**Post date:** [February 21, 2023, 9:14am UTC](https://community.plotly.com/t/dashboard-only-visible-at-the-top-of-the-website-in-a-django-project/72875/3 "2023-02-21T09:14:30Z")

</div>

Thank you very much! This did the trick