CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-mobile
Hamid Ali
Hamid Ali

Reputation: 21

Problem with WebPage division using jQueryMobile CSS

I am facing problem in webpage division by height and width respectively. In my code, I am also using jquery-mobile code and its CSS file. If I remove the jquery-mobile CSS file it is fine, but with it, the page division is not good.

I am using data-role in my div tag. My code is following

<div data-role = "page" id ="home">

    <div  id= "header"  data-role = "header" data-position="fixed">
        <h1>Earth Quake System</h1>
        <a id = "refresh" href="#" data-icon="refresh" class = "ui-btn-right">Refresh</a>
    </div> 

    <div id="map-content"  class = 'map-content' data-role="content">
        <div id="map"></div>     

        <div id="content-details"> 
            <p>I am facing problem here</p>
        </div>
    </div>
</div>

and my CSS code is following

#home {
    height: 100%;
    width: 100%;
}

#header {
    height: 10%;
    width: 100%;
}

#map-content{
    height: 90%;
    padding: 0px; 
    margin:0px;
    z-index: -1;
} 

#map{
    height: 100%;
    width: 80%;
}

#content-details{
    height: 100%;
    width: 20%;
}

This is output when I run this code

enter image description here

Upvotes: 2

Views: 66

Answers (1)

deblocker
deblocker

Reputation: 7687

Use the grid system of the JQM framework, this has what You need inside it (i.e. responsive at smaller screen sizes, and in portrait view. If You need some customization, You can always easily override the default JQM styles. Simply set the desired percent width of each block.

The keypoint here is: You need to initialize the map after the map page has been shown.

DEMO:

var map;

function canvasHeight(canvas) {
  var mapPage = $("#page-map"),
    screen = $.mobile.getScreenHeight(),
    header = $(".ui-header", mapPage).hasClass("ui-header-fixed") ? $(".ui-header", mapPage).outerHeight() - 1 : $(".ui-header", mapPage).outerHeight(),
    footer = $(".ui-footer", mapPage).hasClass("ui-footer-fixed") ? $(".ui-footer", mapPage).outerHeight() - 1 : $(".ui-footer", mapPage).outerHeight(),
    newHeight = screen - header - footer;
  $(canvas).height(newHeight);
}

$(window).on("throttledresize orientationchange", function() {
  canvasHeight("#map");
})

function showLocation() {
  map.locate({setView: true,maxZoom: 16});
}

function loadMap(canvas) {
  map = L.map(canvas).setView([39.46975, -0.37739], 11);
  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(map);
}

$(document).on("pagecontainershow", function(e, ui) {
  if (ui.toPage.prop("id") == "page-map") {
    canvasHeight("#map");
    if (!map) {
      loadMap("map");
    }
  }
});
#page-map .ui-content {
  margin: 0;
  padding: 0;
}

#page-map .ui-block-b {
  margin: 0;
  padding: 1em;
}

#page-map .footer {
  position: fixed;
  z-index: 1000;
  bottom: .1em;
  width: 100%;
}

#map-attribution {
  font-size: small;
  text-align: center;
  background: rgba(255, 255, 255, 0.7);
}

.leaflet-control-attribution.leaflet-control {
  display: none;
}

/* Don't show scrollbars on SO code snippet */
.ui-mobile .ui-page {
  min-height: 100px !important;
}
<!DOCTYPE html>
<html>
<head>
  <title>Earth Quake System</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.js"></script>
</head>
<body>
  <div data-role="page" id="page-map">
    <div data-role="header" data-position="fixed" data-theme="a">
      <h1>Earth Quake System</h1>
    </div>

    <div data-role="content">
      <div class="ui-grid-a">
        <div class="ui-block-a">
          <div id="map"></div>
        </div>
        <div class="ui-block-b">
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
        </div>
      </div>
      <div class="footer">
        <div id="map-attribution">
          <a href="http://leafletjs.com" title="A JS library for interactive maps">Leaflet</a> Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2012 CloudMade
        </div>
      </div>
    </div>
  </div>
</body>

Credits: the canvasHeight function inspired from the great Omar in the answer here: set content height 100% jquery mobile

Upvotes: 1

Related Questions