Get viewport Height in pixels using javescript and css

[mezo-pro]

Hello

I creating a native app and having a problem with height responsiveness,

I figured out a way to accomplish height responsiveness using a plugin " CSS Tools " by changing elements heights

but I want a way to store viewport height in pixels to an input or text element when the user enters the app
it can be done using a plugin " Toolbox " that can run javascript code

I don’t know how to do it exactly, but when done you can use the viewport height dynamically inside the CSSTools and have complete control over height responsivness

does anyone how to store viewport height in pixels to an input or text element using ToolBox with javascript?

[dambusmedia]

Add a “Javascript to Bubble” element to your page, from the ToolBox plugin. Give it a suffix in its property, say “h”. Then add a workflow item to run javascript on page load. In this javascript code add your code that gets the viewport height, and return it to the “Javascript to Bubble” element using bubble_fn_suffix(var).

Here’s an example (I grabbed the viewport height code off some page and have not tested it):

var viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
bubble_fn_h(viewportHeight);

Now you can just use the Javascript to Bubble element’s value to get the viewport height you stored.

[mezo-pro]

Thanks , Works Great

[louisadekoya]

Hi @mezo-pro, I’m looking to do something similar. Can you please describe or show how you’re using the viewport height with css tools to make height responsive?

[mezo-pro]

the easiest way to do it is to add a " Change Element Size CSSTools " in workflow and choose the element you want to control the height of it, and in height put 100vh