4

The map was displaying properly before the addition of the panel. Now as soon as I add a panel div on the page the map displays just like this:

enter image description here

It is just cluttered on the top portion leaving a wide space below. The button on the top left corner of the image is used to open the panel which opens fine. Sorry for the patchy image work.

The html is below:

<body>

    <div data-role="page" id="map-page" data-url="map-page">

        <div data-role="panel" id="mypanel">
            <!-- This is the problematic panel-->
        </div><!-- /panel -->

        <div data-role="header">
            <a href="#mypanel" data-role="button" data-icon="bars" data-iconpos="notext">Choose Station</a>
            <h1>The Header</h1>

            <a href="index.html" data-ajax="false" data-role="button" data-icon="refresh" data-iconpos="notext">Refresh</a>
        </div><!-- /header -->

        <div data-role="content" id="map-canvas"> <!--Div for map display.-->
        </div><!-- /content -->

        <div data-role="footer" data-id="myfooter" class="ui-bar" data-position="fixed">
            <h4>© 2013</h4>
        </div><!-- /footer -->

    </div><!-- /page -->
</body>

My custom css

html { height: 100% }

body { height: 100%; margin: 0; padding: 0 }

#map-page, #map-canvas { height: 100% }

Otherwise I am using default jquery.mobile-1.3.1.min.css. I probably know it might well be because of css, but could not figure out.

4

1 回答 1

5

您将需要更改您的自定义CSS。在这个工作示例中，我使用了您的 HTML 页面并修改了它的 CSS。你这里的主要问题不是面板，至少不是直接的。面板高度会导致页面内容 div 丢失行为，可以CSS使用下面的方法修复。

这是一个工作示例：http: //jsfiddle.net/7kGdE/105/

CSS：

#map-canvas {
    padding: 0;
    position : absolute !important; 
    top : 40px !important;  
    right : 0; 
    bottom : 40px !important;  
    left : 0 !important;     
}

该解决方案也在此处进行了描述。

于 2013-07-24T09:17:52.210 回答