Jquery mobile right panel works different in browser and in emulator
I want to create a panel as per the facebook so i tried the example shown
here the panel length is greater than the page. When i run the example in
the crome and firefox browser it working properly but when i try to run it
in the emulator then header and footer are moving a bit to left and the
panel opens under the header and footer and the content page moves to
right. here is the code i had return for creating the right panel:
<body>
<div data-url="panel-fixed-page1" data-role="page" class="jqm-demos
ui-responsive-panel" id="panel-fixed-page1">
<div data-role="header" data-theme="b" data-position='fixed'>
<h1>Fixed header</h1>
<a href="#nav-panel" data-icon="bars" data-iconpos="notext" id='menu'
>Menu</a>
<a href="#add-form" data-icon="gear" data-iconpos="notext"
id='add'>Add</a>
</div><!-- /header -->
<div data-role="content" class="jqm-content">
<h1>Panels</h1>
<h2>Fixed positioning</h2>
<p>This is a typical page that has two buttons in the header bar that
open panels. The left panel has the reveal display mode. The right
panel opens as overlay. For both panels we set
<code>data-position-fixed="true"</code>. We also set position fixed
for the header and footer on this page.</p>
<p>The left panel contains a long menu to demonstrate that the
framework will check the panel contents height and unfixes the panel
so its content can be scrolled. In the right panel there is a short
form that shows the fixed positioning.</p>
<h2>Responsive</h2>
<p>To make this responsive, you can make the page re-flow at wider
widths. This allows both the reveal panel menu and page to be used
together when more space is available. This behavior is controlled by
CSS media queries. You can create a custom one for a specific
breakpoint or use the breakpoint preset by adding the
<code>class="ui-responsive-panel"</code> to the page container. We
have added this class on this demo page.</p>
<a href="./" class="jqm-button" data-ajax="false" data-role="button"
data-mini="true" data-inline="true" data-icon="arrow-l"
data-iconpos="left">Back to Panels</a>
<div data-demo-html="#panel-fixed-page1"
data-demo-css="true"></div><!--/demo-html -->
</div>
<div data-role="footer" data-theme="b" data-position="fixed">
<h4>Fixed footer</h4>
</div>
<div data-role="panel" data-theme="a" id="nav-panel"
data-display="reveal" data-position-fixed="true">
<ul data-role="listview" data-theme="a" class="nav-search">
<li data-icon="delete"><a href="#" data-rel="close">Close
menu</a></li>
<li><a href="#panel-fixed-page2">Accordion</a></li>
<li><a href="#panel-fixed-page2">AJAX Navigation</a></li>
<li><a href="#panel-fixed-page2">Autocomplete</a></li>
<li><a href="#panel-fixed-page2">Buttons</a></li>
<li><a href="#panel-fixed-page2">Checkboxes</a></li>
<li><a href="#panel-fixed-page2">Collapsibles</a></li>
<li><a href="#panel-fixed-page2">Controlgroup</a></li>
<li><a href="#panel-fixed-page2">Dialogs</a></li>
<li><a href="#panel-fixed-page2">Fixed toolbars</a></li>
<li><a href="#panel-fixed-page2">Flip switch toggle</a></li>
<li><a href="#panel-fixed-page2">Footer toolbar</a></li>
<li><a href="#panel-fixed-page2">Form elements</a></li>
<li><a href="#panel-fixed-page2">Grids</a></li>
<li><a href="#panel-fixed-page2">Header toolbar</a></li>
<li><a href="#panel-fixed-page2">Icons</a></li>
<li><a href="#panel-fixed-page2">Links</a></li>
<li><a href="#panel-fixed-page2">Listviews</a></li>
<li><a href="#panel-fixed-page2">Loader overlay</a></li>
<li><a href="#panel-fixed-page2">Navbar</a></li>
<li><a href="#panel-fixed-page2">Navbar, persistent</a></li>
<li><a href="#panel-fixed-page2">Pages</a></li>
<li><a href="#panel-fixed-page2">New</a></li>
<li><a href="#panel-fixed-page2">Popup</a></li>
<li><a href="#panel-fixed-page2">Radio buttons</a></li>
<li><a href="#panel-fixed-page2">Select</a></li>
<li><a href="#panel-fixed-page2">Slider, single</a></li>
<li><a href="#panel-fixed-page2">New</a></li>
<li><a href="#panel-fixed-page2">New</a></li>
<li><a href="#panel-fixed-page2">New</a></li>
<li><a href="#panel-fixed-page2">Text inputs & textarea</a></li>
<li><a href="#panel-fixed-page2">Transitions</a></li>
</ul>
</div>
here is the css and js files i used:
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
here is the css style i used to set the width of the panel:
<style>
.ui-responsive-panel {
width:200px;
}
.ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal,
.ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push,
.ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal,
.ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push
{
left: 0;
right: 0;
margin-left:-70px;
}
.ui-panel{
width:12.6em;
}
@media (min-width:35em)
{
.ui-responsive-panel.ui-page-panel-open
.ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-left,
.ui-responsive-panel.ui-page-panel-open
.ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-left,
.ui-responsive-panel.ui-page-panel-open
.ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-left,
.ui-responsive-panel.ui-page-panel-open
.ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-left
{
margin-right: 17em; }
.ui-responsive-panel.ui-page-panel-open
.ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-right,
.ui-responsive-panel.ui-page-panel-open
.ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-right,
.ui-responsive-panel.ui-page-panel-open
.ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right,
.ui-responsive-panel.ui-page-panel-open
.ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right
{
margin-left: 17em; }
.ui-responsive-panel.ui-page-panel-open
.ui-panel-content-fixed-toolbar-display-push,
.ui-responsive-panel.ui-page-panel-open
.ui-panel-content-fixed-toolbar-display-reveal {
width:auto;
}
.ui-responsive-panel .ui-panel-dismiss-display-push {
display: none;
}
}
.ui-fixed-hidden {
position: fixed;
}
</style>
and is it possible to make only panel scrollable not the page or content.
Any idea is appreciated. Thanks in advance
No comments:
Post a Comment