jquery-mobile - 固定ツールバーを使用した Jquery Mobile Panel のスタイリング

Question

http://view.jquerymobile.com/1.3.1/dist/demos/examples/panels/panel-styling.htmlのサンプルに従って、パネルの幅を設定しました。すべてうまくいきますが、フッターの固定ツールバーがヘッダーとコンテンツよりも先に移動します。これにより、固定ツールバーからパネルまでの隙間ができます。誰でもこれを修正する方法を知っていますか? ありがとう。

Answer 1

#demo-page #left-panel.ui-panel {
    width: 15em;
}
#demo-page #left-panel.ui-panel-closed {
    width: 0;
}
#demo-page .ui-panel-position-left.ui-panel-display-reveal {
    left: 0;
}
#demo-page .ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open,
.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open,
.ui-panel-dismiss-position-left.ui-panel-dismiss-open {
    left: 15em;
    right: -15em;
}
#demo-page .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-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal {
    left: 0;
    right: 0;
    -webkit-transform: translate3d(15em,0,0);
    -moz-transform: translate3d(15em,0,0);
    transform: translate3d(15em,0,0);
}
/* Reveal menu shadow on top of the list items */
#demo-page .ui-panel-display-reveal {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
#demo-page .ui-panel-content-fixed-toolbar-position-left, .ui-panel-content-wrap-position-left {
    -webkit-box-shadow: -5px 0px 5px rgba(0,0,0,.15);
    -moz-box-shadow: -5px 0px 5px rgba(0,0,0,.15);
    box-shadow: -5px 0px 5px rgba(0,0,0,.15);
}