Forum | Appery.io

Hi guys

I have a weird problem I'm hoping someone can help with please.

On my startscreen I have a table within the page that is set to 100% 100% and the following code is used 'pageshow'
Appery("mobilegrid_5").parent().css("height", Appery("f1bstart").css("height"));
I loaded this on my mobile and when the page is loaded for the first time, everything works well.
I then go to page2 and when I use the mobile device back button to go back to startscreen the table is now not aligned properly and the footer disappears.

The code above only seems to work once and not everytime the startscreen opens.
I tried to use 'page hide' on page2 and then navigate to page using full refresh but this loads startscreen and then refreshes again so it goes black for 2 seconds.

Is there a way to have the startscreen code activate EVERY time the page opens? The problem also happens if I have a back button on page2.

What I really need is EVERY time this page is shown, to activate the above code.

I hope that makes sense, let me know if not and I can do bullet points to try to make it less complicated.

Thanks very much

EDIT - I have fixed the footer problem now. I just need to know how to refresh the page so it run the CSS code to align the table properly.

Hello!

Do you mean every time you return back from screen 2 to screen 1 table increases in size?

Hi Maryna

Yes I think that's what must be happening. When I start with screen1 the table is ok and according to the css. When I go back from screen2 to screen1, the table appears to have increased in size slightly causing a vertical scroll bar.

If testing in appery test area, if i use the refresh button, it goes back to being ok.

(really pleased you understood my first post! I thought I may have confused everything!)

Hi Mark,

Most likely the matter is that the grid size is bigger than you set (has extra margins). So you should remove Margins for the grid (set them to 0). Or if top and bottom Margin are needed, subtract the value of these Margins when setting the height of the grid.

Nikita

Thanks for reply. Grid is set to 100% 100% and there are no margins. This is the only way we could get the grid to centre vertically correctly,.

Thanks
Mark.

Hi Mark.

The code should be executed every time you visit the page as you use "page show" event.

To ensure please add "console.log('Page show event fired')" above your code.

Also please try these two solutions:

1. Use following code instead of yours:

   pre
   Appery("mobilegrid_5").parent().css("height", Appery("f1bstart").height() + "px");/pre

2. Wrap your code into onDelay function:
   pre

   var onDelay = function(){
   Appery("mobilegrid_5").parent().css("height", Appery("f1bstart").css("height"));
   };
   window.setTimeout(onDelay, 100);/pre

   If it doesn't help please provide us with your app public link.

Thanks Alena