Dash / CSS: make a div full screen

Dash Python
1

Hi community,

I have a question regarding CSS and Dash. I have built a Dash app and I would like to make a div full screen. My idea is that the user first sees a “welcoming div”.
The problem is although I set the height and width of the body and html selector to 100% and the container divs to 100%, at the end, my div isn’t covering the whole screen. Is there any parent div or something similiar, that I haven’t found?
I know, the question without code is hard to follow (I have a lot of code, shall I add it here?), but I would be very happy, if someone could make an (very simple) example of how to make a div full screen. Maybe just explain it or, even better, show some code.
I would be very happy, if somone knows how to do that. I have been struggling with this issue for quite some time now.

Jakob

2

Hi @Jakob12

As Dash fires the callback independently (I mean not in a sequential way) I think you can manage to show something that takes the entire screen and at the same time run the other callbacks with other layouts, at least if you are not using different pages: one page for only the welcome page and other for your dashboard.
You can manage to show an introduction message for the entire page using Spinners with full screen, but will be showing for the time the page is loading only.
I’m also trying to manage an other solution like you here: Improving app first loading presentation

3

Try setting height to 100vh (viewport height) and width to 100vw.

3 Likes
4

Hey Tom.

You solved my problem :smiley: :tada:

2 Likes