Dynamic HTML Height

Is it possible to dynamically set the height of an html component by percentage like 100% instead of setting the pixel value?

This can be achieved by setting the height attribute with a xml function and making use of the view.getSize() function available in JourneyScript.

Please see below for an example of how you can do this:

XML

<html src="html/test.html" height="$:getPixelHeight(100)"/>

JS

function getPixelHeight (percentage) {
    return view.getSize().height*percentage/100;
} 

Hi @jaimie, my IDE doesn’t seem to recognize the getSize() function. The warning says:

Property 'getSize' does not exist on type 'LocalView'.

Any suggestions on how to proceed? Thanks!

@alex-valdez I have the same issue, it’s a linting issue and should not prevent deployment. So you should be fine to proceed.

This is an issue with the TS linter at the moment. A fix is in progress.

This has been fixed in runtime-build 0.4.3 and above

Hi @JaimieLogan, my IDE doesn’t seem to recognize the getSize() function. The warning says: Property 'getSize' does not exist on type 'LocalView'. Any suggestions on how to proceed? Thanks!

@AlexValdez I have the same issue, it’s a linting issue and should not prevent deployment.

@AlexValdez That issue has been fixed now.@DavidHoltzhausen The issue does prevent deployment in TypeScript apps. As a workaround, you can add // @ts-ignore on the previous line to ignore the error.

@DavidHoltzhausen I was actually able to resolve this with the following: let size = await view.getSize(); let height = screen.height; This removed the linting issue and is working properly. view.getSize returns a promise with an interface --> {width: number; height: number}. That’s why it needed the await. I believe // @ts-ignore would work as well. But, it’s probably better to handle the promise to prevent further issues.