GoogleMaps is overlapping div container

Question

I created this page structure:

<div id="page-content-wrapper">
    <div class="content-container group container-fluid">
        <div class="row">
            <div class="col-md-5 mapContainer">
                <!-- Quicksearch -->
                <div id="LocationQuickSearch">
                    <form role="form">
                        <div class="form-group">
                            <label>Addresse</label>
                            <input class="form-control" id="searchAddress" v-model="searchAddress" placeholder="Bitte geben Sie eine Suchaddresse ein." v-on:focus='clearFormFields'>
                        </div>
                    </form>
                </div>

                <!-- GIS MAP -->
                <div id="GISMap" v-el:map></div>

            </div>

            <!-- Form -->
            <div class="col-md-7 incidentContainer">
            </div>
        </div>
    </div>
</div>

But the map within the id GISMap is overlapping the encompassing GISMap container. How can I adjust this?

Javascript

#wrapper {
  width: 100%;
  height: 100%;
  padding-left: 250px;
}

// --Page Content
#page-content-wrapper {
  height: 100%;
  padding: 0;
  background-color: red;
}

.row, .container-fluid {
  height: 100%;
}

.row .mapContainer {
  padding: 0px;
  height: 100%;
  background-color: red;
}
.row .incidentContainer {
  padding: 0px;
  height: 100%;
}

.incidentForm {
  height: 100%;
  width: 100%;
  background-color: lightgray;
}

/* Float Clearfix ------------------------------ */
.group:after {
  content: "";
  display: table;
  clear: both;
}

#GISMap {
  height: 100%;
}

#LocationQuickSearch {
  height: 100px;
  width: 100%;
  background-color: yellow;
  padding: 10px;
  clear: both;
}

BEFORE OVERFLOW

I added a fiddle... but it does not work for some reason as I expect... It doesnt show what I see... — sesc360, Apr 08 '16 at 08:23
You can set display to flex in CSS for the parent div and the parent div will expand together with the map, but i believe this is not what you want, you want to contain the map inside the parent div with it's original size. If your parent div will always have the same height, when creating the map, you can define a specific size for it. Check here: http://stackoverflow.com/questions/743214/how-do-i-resize-a-google-map-with-javascript-after-it-has-loaded — goncalopinto, Apr 08 '16 at 08:27
Actually I want to have the parent div to have a height of 100% all the time, so full viewport height. — sesc360, Apr 08 '16 at 08:28
when I set the parent div `.row .mapContainer` to display: flex, the map disappears completly. — sesc360, Apr 08 '16 at 08:30
try with both changes i included in the answer i just posted. If it still disappears just remove the flex line and see if it does what you need. It should still work with no flaws. — goncalopinto, Apr 08 '16 at 08:34

score 0 · Answer 1 · answered Apr 08 '16 at 08:32

0

To resolve your issue set this CSS properties for your parent div:

  height: 100vh;
  display: flex;

and remove your line where you set the height to 100%, the first line above will set the height to 100 per cent of the viewport. The second line will allow your div to expand size with the content inside it.

answered Apr 08 '16 at 08:32

goncalopinto

433
2
8

I added this to: `.row .mapContainer { padding: 0px; background-color: red; height: 100vh; display: flex; }` but the mapview disappears completley then – sesc360 Apr 08 '16 at 09:13
Actually it is now not below the locationQuickSearch div, but aside to this. – sesc360 Apr 08 '16 at 09:15
just make the locationQuickSearch div 100% width and that should work fine. If this does not work just post a JSfiddle link with the full working code so I can help you better. – goncalopinto Apr 08 '16 at 09:25
I can't recreate the layout in the JSFiddle for some reason. – sesc360 Apr 08 '16 at 09:40
The issue only happens when the search Div is added above the map. Then the height collapses. – sesc360 Apr 08 '16 at 09:49
When I add `overflow:auto` to `.row, .container-fluid` it expands, but I get the scrollbar which should not be there. So the height is now bigger than the viewport. I really can't get around this topic somehow – sesc360 Apr 08 '16 at 09:54
Do you have any other way you can show me this working as it is? If possible show me a link of some website that works the way you want yours to work. If you can get this it will be easier for me to give you the best solution and an accurate one. – goncalopinto Apr 08 '16 at 10:02
I want to have the searchbar and the map contained within the parent container so the parent stretches to full width of the viewport, containing both divs. When I add the searchbar, the map begins to overlap the container – sesc360 Apr 08 '16 at 10:09
So, you want the map to positioned where? Inside the div that has the search field or inside the container, below the search bar? – goncalopinto Apr 08 '16 at 10:18
Inside the container below the search bar – sesc360 Apr 08 '16 at 10:18
the layout holds fine when the searchbar is not part of the container. As soon as I add it, the mapview overflows the container – sesc360 Apr 08 '16 at 10:19
can you post a picture of what you have at the moment, before the overflow and after the overflow? – goncalopinto Apr 08 '16 at 10:22
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/108617/discussion-between-sesc360-and-goncalopinto). – sesc360 Apr 08 '16 at 10:25

GoogleMaps is overlapping div container

1 Answers1