footer + navbar disappearing after a click on a list item

[ciccio]

in my app i have many pages and this problem occurs just on one page named "prodotti"
where i have a list with many items loaded from a REST service.

i have a footer with a navbar
i customized the nav bar images by adding a css asset
code/*[dsid=prodotti] .ui-icon { */
a[name='prodotti'] .ui-icon {
background: no-repeat url("../image/menu_prod.png");
background-color:#f3efd3;
background-position: center;
background-size: 22px 22px;
background-repeat: no-repeat;
height: 28px !important;
margin-left: -15px !important;
margin-top: -2px !important;
margin-bottom: 1px !important;
width: 28px !important;
padding-bottom:0px; }

/[dsid=Percorsi] .ui-icon {/
a[name='Percorsi'] .ui-icon {
background: no-repeat url("../image/menu_strade.png");
background-color:#f3efd3;
background-position: center;
background-size: 22px 22px;
background-repeat: no-repeat;
height: 28px !important;
margin-left: -15px !important;
margin-top: -2px !important;
margin-bottom: 1px !important;
width: 28px !important;
padding-bottom:0px; }

/*[dsid=mappa] .ui-icon { */
a[name='mappa'] .ui-icon {
background: no-repeat url("../image/menu_poi2.png");
background-color:#f3efd3;
background-position: center;
background-size: 24px 24px;
background-repeat: no-repeat;
height: 28px !important;
margin-left: -15px !important;
margin-top: -2px !important;
margin-bottom: 1px !important;
width: 28px !important;
padding-bottom:0px; }

/*[dsid=news] .ui-icon { */
a[name='news'] .ui-icon {
background: no-repeat url("../image/menu_rss.png");
background-color:#f3efd3;
background-position: center;
background-size: 22px 22px;
background-repeat: no-repeat;
height: 28px !important;
margin-left: -15px !important;
margin-top: -2px !important;
margin-bottom: 1px !important;
width: 28px !important;
padding-bottom:0px; }

[dsid=galleria] .ui-icon {
background: no-repeat url("../image/menu_gallery.png");
background-color:#f3efd3;
background-position: center;
background-size: 22px 22px;
background-repeat: no-repeat;
height: 28px !important;
margin-left: -15px !important;
margin-top: -2px !important;
margin-bottom: 1px !important;
width: 28px !important;
padding-bottom:0px; }
/code

on the page "prodotti" pageshow event i added a custom java script
codeAppery('navbar_menu').find('li').height('30');/code
to resize my footer + nabvar height

when i load the page the first time or if i navigate throwgh the navbar's items everything works., but if i click on a list item to navigate to the detail page.
1 the footer + navbar disappear
2 when a come ack to the same page the footer is no more fixed and its height is 50px

[ciccio]

1 more interesting information:
the first time i click to a list item in the master page. the footer + header disappear.
and when a come back to the master page from the details one the footer is no more fixed and its height is 50px;
but if i click a second time to al list item the footer + header appear and when a come back to the master page from the details one the footer is fixed and its height is 30px; as i want

[Maryna Brodina]

Hello! Working on it, I'll update.

[Maryna Brodina]

Please check are there any errors in console? If there are no errors post your public app link so we can take a look.

[ciccio]

no errors in console.
my app link is http://appery.io/app/mobile-frame?src...
to reproduce my problem from the home page you have to navigate by clicking the button(image) "prodotti" and then click on some item and from the details page click again the button back
anyway i already shared my app with appery support. the name is "strade del vino cs"

[ciccio]

if you are testing the app you can see that the problem occurs in every "master" pages. and the header (as the footer) is not fixed anymore when coming back from the details page

[Kateryna Grynko]

Hi Ciccio,

Add this CSS:pre[data-role=header]{
position: fixed;
}/pre

[ciccio]

thank you Katya
i added your css and

code[data-role=footer]{
position: fixed;
}/code
and now when i come back from the details page to the master one everything is ok

the only strange thing is that when i click on a list item in the master page the header or footer slides up (case of header) or down (case of footer) before to navigate to the details page. But this is not a big prolem

thanks

[Maryna Brodina]

Hello! It's a bug unfortunately, we'll fix it.

[lorenzo]

ived tried this code
[data-role=footer]{
position: fixed;
}
but what happens is that the footer is bouncing instead being fixed on its position.....this is what happens upon testing it to an android jellybean cellphone....