Problem with WebPage division using jQueryMobile CSS

Question

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

Div elements are block-level elements by default, which means that they take up the full width available and start on a new line. You can try changing the CSS attributes to those divs to `display:inline` or `display:inline-block` or a variety of other display types that will allow both divs to exist on the same "line" — tshimkus, Dec 09 '19 at 21:36
Does this answer your question? [Strange default size in leaflet map](https://stackoverflow.com/questions/45252475/strange-default-size-in-leaflet-map) — deblocker, Dec 10 '19 at 15:22
There is one more consideration that hasn't been discussed, and that is the likely situation that 80% + 20% of the container width are not available for both divs to appear on the same line. It could be inherited margins from your browser or something prohibiting the full 100% width being available. — tshimkus, Dec 10 '19 at 19:33
Also, the spacing between the two divs in the HTML markup might be interpreted as a space character (like ` `), which has a size of its own and would wedge some width between the 80% and 90%. This could be remedied by and using `display: inline-block;` and `float: left;` on both divs. — tshimkus, Dec 10 '19 at 19:43

score 1 · Answer 1 · answered Dec 11 '19 at 09:51

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

Problem with WebPage division using jQueryMobile CSS

1 Answers1