Grid 100% Height of Screen

[Mike6580064]

I'm using the following JS on Page Show to stretch my grid to 100% height of any screen:

Appery("mobilegridHome").css("height", '100%');
Appery("mobilegridHome").parent().css("height", Appery("mobilecontainerHome").css("height"));

This works as it is supposed to, however the grid doesn't resize until a split-second after the page has loaded, causing a brief jarring effect. I tried the same code on a Load event but the grid didn't resize at all.

Is there a way to fix this so that the grid stretch isn't visible?

[Serhii Kulibaba]

Hello Mike,

Use JS below:

Apperyio("mobilegridHome").css("height","100vh");

[Mike6580064]

Sergiy,

This does not work.

[Serhii Kulibaba]

Is it situated inside of other component? Can you set background color of mobilegridHome to see it? please provide screen shot.

[Mike6580064]

The problem is not making the grid fill the height of the screen. The problem is that the grid resizing happens a spit-second after the page appears. I wanted to know if it was possible to have the grid resizing take place before the page appears.

[Serhii Kulibaba]

sure, just add it into CSS:

pre
[name=mobilegridHome] {
height : 100vh;
}
/pre

[Mike6580064]

This still doesn't address the resizing problem. The grid resize is still visible when the page first loads.

[Mike6580064]

If you'd like to take a look yourself the app is called "SC App Demo" and has been shared with support. Notice how the homepage buttons "jump" into place when the screen first loads (and anytime the homepage is navigated to thereafter).

[Kateryna Grynko]

Hi Mike,

On startScreen works properly. Probably you meant login page. Could you please give us test credentials so we could test it?

[Mike6580064]

Katya,

Thanks for having a look. I've bypassed the login page and start out with the homepage. When testing on a device--Appery mobile tester or IPA--notice how the icons on the homepage and sponsor page "jump" into place when the pages load.