CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3leafletdc.js
mutanthumb
mutanthumb

Reputation: 161

Alignment issue with CSS and Bootstrap

My leaflet map is covering the title of the map which is supposed to be just above the map. I am using CSS and Bootstrap to align page elements. See the image: enter image description here Here is the code:

  <style type="text/css">
body, html {
  height: 100%;
  margin: 0;
  padding: 0;
}

div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
img {
width:97%; /* you can use % */
height: auto;
}
div#location {
  width:600px;
  height:400px;
}

div#datatable {height:700px; overflow-y:scroll; width: 425px word-wrap: break-word;}
td.dc-table-label {display:none;}
span.dc-data-count {font-size:.5em;}
span.dc-data-count {font-weight: normal;}
table#media-table {
    background-color: black;
    color:white;
    padding: 0;
}


  <div class="container" style="padding-top:20px">

<h2 class="page-title">Ivan Doig Archive Explorer <span class="dc-data-count">Showing <span class="filter-count"></span> of <span class="total-count"></span> photographs {<a href="javascript:dc.filterAll(); dc.renderAll();">reset</a>}</span>
</h2>

    <div class="row">
        <div class="col-md-4">
          <strong><span id="datatable"></span>Media</strong>
          <table class="table table-hover" id="media-table"></table>
        </div>
        <div class="col-md-6" id="location">
          <strong><span id="map"></span>Location</strong>
        </div>
    </div>

References to the datatable and the map are as follows:

var map = dc.leafletMarkerChart("#location", groupname)
var dataTable = dc.dataTable("#media-table", groupname)

The map is supposed to line up with the top of the "filmstrip" and it has a title of "Location" just like "Media". This will allow for adding summary stats at the top of each element.

Upvotes: 1

Views: 278

Answers (2)

Gordon
Gordon

Reputation: 20150

dc.leaflet.js is going to take over the entire <div> it's given in its constructor, so just move the title out of the div, right?

Since this means the map is not taking up the entire bootstrap column, we'll need to put it in its own child div.

<div class="row">
    <div class="col-md-4">
      <strong><span id="datatable"></span>Media</strong>
      <table class="table table-hover" id="media-table"></table>
    </div>
    <div class="col-md-6" id="location-column">
      <strong><span id="map"></span>Location</strong>
      <div id="location">
    </div>
</div>

You'll see a lot of examples that put other stuff inside the div that dc.js charts use. It's mostly useful for the reset/display filter controls, so that the chart can find and change them. It's makes the layout confusing.

Another solution may be to add to the top margin using marginMixin.margins():

map.margins({top: 100, left: 0, right: 0, bottom: 0}); // or whatever you need

It may be that dc.js behaves better with respect to those extra elements than dc.leaflet.js does, or it may just be that dc.js has default margins while dc.leaflet.js zeros them out.

Upvotes: 1

David Nguyen
David Nguyen

Reputation: 8508

Although this is not really ideal in terms of structure I would make use of the spans to push down the starting point of the map element.

<div class="row">
    <div class="col-md-12">
        <strong><span id="datatable"></span>Media</strong>
    </div>
    <div class="col-md-4">
        <table class="table table-hover" id="media-table"></table>
    </div>
    <div class="col-md-6" id="location">
        <strong><span id="map"></span>Location</strong>
    </div>
</div>

Upvotes: 1

Related Questions