Dynamic HTML Height

General Q&A
1

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

2

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;
}
3

Hi @anon31687946, 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!

4

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

5

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

6

This has been fixed in runtime-build 0.4.3 and above

7

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!

8

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

9

@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.

12

@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.

13

I have the same problem, unfortunately. I get a message view.getSize() is not a function.

Do I understand correctly alex-valdez, that you solved this problem by determining a height for the html on the html-component side, and then let the Journey know what the height should be through a promise in the getPixelHeight() function on the Journey-side?

What does your getPixelHeight() function look like, if I may ask?

14

Hi Christine

You will get the view.getSize() is not a function warning/error when your runtime version does not support this functionality. Minimum required runtime version is 4.70.0