All topics

How do I use 100vh on an element when I'm developing?

Christiaan

3 months ago

If I stretch the viewport to auto-fit and set an element to 100vh then it takes up the entire viewport and everything below it is pushed to the bottom. If I change the viewport to something reasonable like 1920x1080 then viewport is a rectangle that only show the top but nothing below it.

How do I do this exactly?
Christiaan

3 months ago

Or if I have multiple sections and I want them all to be 100vh below eachother, then the development viewport becomes unusable 🤔
Tod

3 months ago

Great energy @Christiaan! Your continuous contribution to the toddle Community just made you advance to Community Level 2!
@Christiaan
Or if I have multiple sections and I want them all to be 100vh below eachother, then the development viewport becomes unusable 🤔
Lucas G

3 months ago

Your can scroll the preview, if that’s what you’re referring to
Lucas G

2 months ago

Also consider using min-height if you’re not already. Setting height to 100vh can easily break things on different screens
Christiaan

2 months ago

Not in the preview website, but in the editor
You have the drag handles on the side and bottom, that's the viewport right?
If I drag it down it becomes bigger and 100vh will adjust to that size, pushing any content below it outside the viewport
If I click auto-fit here, 100vh will always be that size
Which is not what happens on the preview website
Lucas G

2 months ago

No you have to 'preview' it to scroll (Press T or icon on bottom bar)
Alternatively, remove the 100vh temporarily while building.
Christiaan

2 months ago

Yeah I'm doing that but that's a bit of a drag
Cause I have to save it as 100vh for proper results, then when editing switch to something else :/
Just a point of feedback then...
Lucas G

2 months ago

Yeah I'm not sure how they could address that
Lucas G

2 months ago

The preview inside the editor is basically a realtime view of your site. It mimics a viewport so I'm not sure how they could change it to show otherwise without removing the 'real' preview
They'd have to completely change how they do the editor preview 🤔
Christiaan

2 months ago

Maybe the auto-fit can expand without affecting the viewport, so 100vh stays what it was before you pressed auto-fit
Because auto-fit is not a realistic viewport anyway
@Christiaan
Maybe the auto-fit can expand without affecting the viewport, so 100vh stays what it was before you pressed auto-fit
Lucas G

2 months ago

This would make for a good suggestion if it hasn’t been posted already
Lucas G

2 months ago

Though it’s not about it being a realistic viewport necessarily, it just assumes it’s a viewport and adjusts accordingly
For those handful of users with 8k displays 😂
Christiaan

2 months ago

Another way to do it is a variable somewhere what the max viewport height can be
You could still grow it beyond that but 100vh would stick to x pixels
But yeah, it's a bit of an odd issue
Just needs a solution because it breaks 100vh completely now :/

How do I use 100vh on an element when I'm developing?

Christiaan

Christiaan

Tod

Lucas G

Lucas G

Christiaan

Lucas G

Christiaan

Lucas G

Lucas G

Christiaan

Lucas G

Lucas G

Christiaan