Search code examples
dictionaryleafletsidebaroverlap

Leaflet sidebar-v2 issue with overlapping

Maybe someone know where is the problem, why my sidebar overlap header and footer.

HTML

<div id="sidebar" class="sidebar collapsed">
  //sidebar content
</div>

<div id="map" class="sidebar-map"></div>

CSS

#map {
  display: block;
  margin-left: auto;
  margin-right: auto;
  height:100%;
  width: 100%;
}

Old version of sidebar working properly.

Solution

  • Although it's hard to say without a proper testcase on JSfiddle or Plunker but: how about setting margin-top and margin-bottom on #sidebar your sidebar element?

    CSS:

    #sidebar {
    margin-top: ?px;
    margin-bottom: ?px;
}