Fit element to windows width

Ask us anything How do I?
1

Hello,

I would like to fit an element’s height (mapbox) to the height of my window and not the height of my page. I’ve tried to use Windows.InnerWidth but it doesnt seem to work. Anyone can help ?

Jacques

2

Set the width to 100vw or 100% (you can select the unit)

3

% doesnt work and i do not have vw :frowning:

4

You can bind a string as a value and write “100vw”
Could you send us your setup?

1 Like
5

Oh i didnt know that !

I’ve found a solution with JS, using window.height, I don’t know if it’s better than the solution u just sent ?

6

Setting to window.height is a good shim! Just pay attention to whether your window resizes later and how that affects the map display. If you find it’s acceptable, you’re done! And if you find that there are corner cases, you might wind up adding a window resize listener.

7

Thanks for the explanations!!

8

Also please use wwLib.getFrontWindow() instead of just window (so it work correctly on the editor)
Please be aware that this will not be reactive (the value will not change if the window is resize)

Using 100vh seems better, you can even try the new unit dvh, which will handle also the height with or without the adress bar on mobile

2 Likes
9

Oh thanks, i’m going to use 100vh then ! Should i just set the input to “100vh” then ?

10

Yes exactly :slight_smile: or “100dvh” depending on which browser you need to support

11

Does dvh works with more browsers ?

12

You cand find the list of supported browser here

1 Like