'How do I use Jquery Mobile Slide Panel to slide up from the bottom?

I am working on an app and i need a panel to slide up from the bottom when something is selected. I see in jquery mobile slide panel that you can set position to either left or right, but how do you set to bottom?

Solution 1:^[1]

see https://github.com/jquery/jquery-mobile/pull/5770

Unfortunately, arschmitz said:

there are a bunch of conflicts here because of changes we have made to panels. love the feature though and would love to try and make this happen for 1.5 im going to close this PR just because it is now outdated however would like to work with you to land this in hopefully next version

Solution 2:^[2]

Create a custom panel as a box, and place it 100% bellow the place with an inner box to enable scrolling. Alternative use the Iscroll plugging for scrolling.

Demo

http://jsfiddle.net/7pttcgvw/

Jquery

$(function() {

    $('#openpanel').click(function(){
            $('#box').animate({'bottom':'0'},300);
        });

    $('#close').click(function(){
        $('#box').animate({'bottom':'-100%'},300)        
    });

});

CSS

.box{
position:fixed;
bottom:-100%;
left:0%;
height:100%; 
background-color: #DBDBDB;
width: 17em;
display: block;
z-index:999999;
}

.box-inner {
    position: absolute;
    width:100%;
    top: 0px;
    bottom: 0px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

Solution 3:^[3]

To create a bottom overlay panel with jQuery Mobile v1.4.5.

.ui-panel-display-overlay[data-position="bottom"] {
  top: auto;
  bottom: 0px;
  width: 100% !important;
  height: auto !important;
  min-height: auto;
}
.ui-panel-animate.ui-panel-display-overlay[data-position="bottom"] {
  right: 0;
  -webkit-transform: translate3d(0, 100vh, 0);
  -moz-transform: translate3d(0, 100vh, 0);
  transform: translate3d(0, 100vh, 0);
}
.ui-panel-display-overlay[data-position="bottom"].ui-panel-display-reveal,
.ui-panel-display-overlay[data-position="bottom"].ui-panel-open {
  bottom: 0;
}
.ui-panel-animate.ui-panel-open.ui-panel-display-overlay[data-position="bottom"] {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -moz-transform: none;
}

<link rel="stylesheet" href="https://demos.jquerymobile.com/1.4.5/css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="https://demos.jquerymobile.com/1.4.5/_assets/css/jqm-demos.css">
<script src="https://demos.jquerymobile.com/1.4.5/js/jquery.js"></script>
<script src="https://demos.jquerymobile.com/1.4.5/_assets/js/index.js"></script>
<script src="https://demos.jquerymobile.com/1.4.5/js/jquery.mobile-1.4.5.min.js"></script>
<body
<div data-role="page" class="jqm-demos jqm-panel-page" data-quicklinks="true">
  <div role="main" class="ui-content jqm-content">
    <a href="#bottompanel1" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-btn-mini">Overlay</a>
  </div>
</div>
<!-- bottompanel1 -->
<div data-role="panel" id="bottompanel1" data-position="bottom" data-display="overlay" data-theme="a">
  <h3>Bottom Panel: Overlay</h3>
  <p>This panel is positioned at the bottom with the overlay display mode. The panel markup is <em>after</em> the header, content and footer in the source order.</p>
  <p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p>
  <a href="#demo-links" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left ui-btn-inline">Close panel</a>
</div>
<!-- /bottompanel1 -->
</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Anderson
Solution 2
Solution 3	John

'How do I use Jquery Mobile Slide Panel to slide up from the bottom?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]