2

I'm developing a webGIS map with Openlayers 6. It contains many widgets and modules I write myself. everything was fine until I added Bootstrap 4 to my project.

After adding Bootstrap 4 (it's fine with Bootstrap 3!) the view does not display anymore(just a blank div). first, I thought there might be some error but I checked browser's console, no errors!
These are packages I added:

Bootstrap 4.0.0
jQuery 3.4.1
Openlayers 6.0.1 css and js

Everything works great before adding one of these lines:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

I keep trying different things but found nothing. At the end, I add an event listener to view change. I scrolled mouse in map-div. I saw the logs in the browser's console!! So it's a problem with displaying not the core code.

Here is my CSS for map-related divs:

html,
body,
#map {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    z-index: 0;
    overflow: hidden;
    position: relative;
}

I tried to change/removing these css but nothing happens. I also tried changing z-indexes but nothing. The project isn't online yet so I can't give any link.

I really get into trouble with this and I will appreciate any idea or solution except switching to bootstrap 3 :))

Regards, M. Mahmoodian

geocodezip
  • 158,664
  • 13
  • 220
  • 245
Mahdi Mahmoodian
  • 473
  • 2
  • 13

1 Answers1

1

It looks like you want to create a full-screen map. The minimal css to achieve that is the following css:

  html, body, #map {
    width: 100%;
    height: 100%;
    margin: 0;
  }

with a map container defined like this:

<div id="map"></map>

Another important thing is that you need to load the Bootstrap css before the css of OpenLayers and your app. For reference, this is a minimal working example for a full-screen map with Bootstrap 4 css included: https://codesandbox.io/s/simple-5tixv.

ahocevar
  • 5,448
  • 15
  • 29