view it on jfiddle. (you may need to add the frameworks: jquery 1.11.0, then tick the box for jquery mobile 1.4.4. I tried adding the resources for the versions I use (1.11.1 and 1.4.5 respectively -- but the pages don't render from their link. Sorry 'bout that.)
When I add data-position='fixed' to my footer on a page that has, a reduced width on larger screens (set with a media query in css) and a nav-panel that says open on larger screens using the data-display="reveal" or "push" (no problem with "overlay"), when I open the nav-panel (icon in upper left of header) the footer slides right as it should, but does not resize, and the contents are not centered. The re-sizing toggles if I click on the background, but the content never centers. I've settled on "overlay" as a temporary fix, but I'd prefer to use "reveal" (the default). Much of the CSS for the nav-panel is borrowed from the jquery mobile demos.
To duplicate the problem on the fiddle, use a wide screen and enlarge the output panel so that you see the gradient background, then click on the menu button (bars). After that you can see the footer slide (but not adjust its width) and slide back to an adjusted width (but not center the icons in the footer).
Any ideas what I did wrong or what CSS might resolve the issue?
Here's the html:
<body>
<div data-role="page" id="index-page" class="ui-responsive-panel" data-title="MMT" data-url="index-page" data-theme="a">
<div data-role="header" >
<h6 class='header' style="overflow:visible !important;">Test Page</h6>
<a href="#index_nav-panel" data-icon="bars" class="ui-btn ui-corner-all ui-btn-inline ui-icon-bars ui-btn-icon-left ui-btn-a ui-alt-icon ui-nodisc-icon ui-btn-icon-notext"></a>
<a href="#popupDialog" data-rel='popup' data-position-to="window" data-transition="pop" data-icon="mail" class="ui-btn ui-corner-all ui-btn-inline ui-icon-mail ui-btn-icon-left ui-btn-a ui-alt-icon ui-nodisc-icon ui-btn-icon-notext">Contact</a>
</div><!-- /header -->
<div data-role="panel" class="jqm-navmenu-panel" data-position-fixed="true" data-display="reveal" id="index_nav-panel">
<ul data-role="listview">
<li><a href="#index-page" data-rel="close">Close Menu</a></li>
<li><a href="#Attorneys-page" data-transition="flip">Blah</a></li>
<li><a href="#Governmental-Law-Regulation-page" data-transition="flip">Foo</a></li>
<li><a href="#Government-Affairs-page" data-transition="flip">Bar</a></li>
<li><a href="#Resource-Links-page" data-transition="flip">Bat</a></li>
</ul>
</div>
<div role="main" class="ui-content"><div class="banner">Banner Image </div>
<p>text</p>
<div style='margin-top:44px;'>
<ul data-role="listview">
<li><a href="#" data-transition="flip">Foo</a></li>
<li><a href="#" data-transition="flip">Bar</a></li>
<li><a href="#" data-transition="flip">Bat</a></li>
<li><a href="#" data-transition="flip">Baz</a></li>
<li><a href="#" data-rel="popup" data-transition="pop" class="ui-icon-mail">Biz </a></li>
</ul>
</div>
<div data-role='collapsible' class='ui-nodisc-icon' data-collapsed-icon="home" data-expanded-icon="carat-u" data-mini='true'>
<h3>Follow...</h3>
<p>Follow us on Twitter:</p>
</div>
</div>
<div data-role='footer' data-position='fixed'>
<div class='footer'>
<a href="#popupDialog" data-rel="popup" data-transition="pop" data-icon="mail" class="ui-btn ui-corner-all ui-btn-inline ui-icon-mail ui-btn-a ui-alt-icon ui-nodisc-icon ui-btn-icon-notext">Contact</a> <a href="#popupPhone" data-rel="popup" data-transition="slideup" class="ui-btn ui-btn-corner-all ui-btn-inline ui-icon-phone ui-nodisc-icon ui-btn-a ui-alt-icon ui-btn-icon-notext">Phone:</a>
<a href="#popupSocialMedia" data-rel="popup" data-transition="slideup" class="ui-btn ui-btn-corner-all ui-icon-home ui-btn-icon-right ui-btn-inline ui-btn-a ui-nodisc-icon ui-btn-icon-notext">Twitter</a>
</div>
</div><!-- /footer -->
here's the css
/*css file for mobile website*/
@media all and (max-width: 50em) {
.my-breakpoint .ui-block-a,
.my-breakpoint .ui-block-b,
.my-breakpoint .ui-block-c,
.my-breakpoint .ui-block-d,
.my-breakpoint .ui-block-e {
width: 100%;
float:none;
}
}
.banner img{
display:block;
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto
}
/* set a width for wide screens */
.collapsible {
max-width:900px;
}
/* to center the content on wide screen pc or laptop */
@media only screen and (min-width: 1025px){
.ui-page{
width: 960px !important;
margin: 0 auto !important;
position: relative !important;
/*border-right: 3px rgb(93, 105, 105) outset !important;
border-left: 3px rgb(93, 105, 105) outset !important;*/
}
.ui-footer {
max-width: 960px !important;
margin: 0 auto !important;
}
}
.header, .firm {font-family: 'IM Fell French Canon SC', serif !important;}
.firm{font-size:1.2em; font-weight:bold;}
.ui-header .ui-title {
margin-right: 10%;
margin-left: 10%;
}
/*panel background color*/
div#index_nav-panel{
background-color: rgba(91, 95, 97, 0.1) !important;
}
/*panel stays open on desktops*/
@media (min-width:35em) {
/* wrap on wide viewports once open */
.ui-panel-page-content-open.ui-panel-page-content-position-left {
margin-right: 17em;
}
.ui-panel-page-content-open.ui-panel-page-content-position-right {
margin-left: 17em;
}
.ui-panel-page-content-open {
width: auto;
}
/* disable "dismiss" on wide viewports */
.ui-panel-dismiss {
display: none;
}
/* same as the above but for panels with display mode "push" only */
.ui-panel-page-content-open.ui-panel-page-content-position-left.ui-panel- page-content-display-push {
margin-right: 17em;
}
.ui-panel-page-content-open.ui-panel-page-content-position-right.ui-panel- page-content-display-push {
margin-left: 17em;
}
.ui-panel-page-content-open.ui-panel-page-content-display-push {
width: auto;
}
.ui-panel-dismiss-display-push {
display: none;
}
div.footer {
text-align: center;
letter-spacing: .2em;
font-size: 1em;
}
}
/* #### target mobile devices with max device width 480px #### */
@media screen and (max-device-width: 480px){
div.footer {
font-size: .75em;
}
div.footer a.ui-btn {
margin-top: 0.1em !important;
}
}
div.footer {
text-align: center;
/* font-size: .75em;
*/}
.footer-text{
color: #999;
margin-left:-8px;
}
/*popup dialog background color*/
div#popupSocialMedia, div#popupDialog {
background-color: rgb(237,237,237);
}
div#popupDialog .ui-content {
height: 50%;
}
div.ui-content { background-color: #f9f9f9 !important;}
.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a {
background-color: rgb(10, 10, 10) !important;
background: #d2b48c; /* old browsers */
background: -webkit-linear-gradient(#efefef,#000000) fixed; /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(#efefef,#000000) fixed; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
@media (min-width: 60em) {
.jqm-demos .jqm-header h2 {
padding: 1em 0 .7em;
margin: 0 1em 0 3%;
text-align: left;
}
.jqm-demos .jqm-header h2 img {
width: 275px;
height: 78px;
}
.jqm-demos .jqm-header p {
bottom: auto;
left: auto;
top: 50%;
right: 15%;
font-size: 1.2em;
margin-top: -.625em;
}
.jqm-demos .jqm-navmenu-link {
display: none;
}
.jqm-demos .jqm-search-link {
right: 3%;
}
.jqm-demos .jqm-footer p {
float: right;
margin: 1.5em 3% 1.5em 1.5em;
}
.jqm-demos .jqm-footer p:first-child {
float: left;
margin: 1.25em 1.25em 1.25em 3%;
}
.jqm-demos .jqm-navmenu-panel {
visibility: visible;
position: relative;
left: 0;
clip: initial;
float: left;
width: 25%;
background: none;
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
transform: none !important;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.jqm-navmenu-panel .ui-panel-inner {
margin-top: 3em;
margin-bottom: 3em;
}
.jqm-navmenu-panel .ui-listview .ui-btn {
padding-left: 12.5%;
text-shadow: none !important;
}
.jqm-navmenu-panel .ui-listview .ui-listview .ui-btn {
padding-left: 15%;
}
.jqm-navmenu-panel .ui-collapsible,
.jqm-navmenu-panel .ui-collapsible-content,
.jqm-navmenu-panel .ui-btn {
background: none !important;
border-color: #ddd !important;
}
.jqm-navmenu-panel .ui-btn.ui-btn-active {
color: #3388cc !important;
}
.jqm-navmenu-panel .ui-btn::after {
opacity: 0;
-webkit-transition: opacity 500ms ease;
-moz-transition: opacity 500ms ease;
transition: opacity 500ms ease;
}
.jqm-navmenu-panel .ui-btn:hover::after {
opacity: .6;
}
.ui-panel-dismiss-open.ui-panel-dismiss-position-right {
left: -17em;
right: 17em;
}
}
I've omitted the javascript... from here and the fiddle.
Thanks for looking at this...
screenshot of the footer extended ...screen shot of the footer retracted after clicking on the background
The problem goes away if I remove "data-position="fixed" from the footer.
