Question

I have a google Maps with height and width 100% in the css.

I use the following to resize the map when the windows is resized:
also with the more options button a sidebar gets activated then also the div of the map (#kaart) resizes.

Within the sidebar I have a accordion. when this accordion is toggled and and its height exceeds the windows height then there is again a resizement. But then on the bottom there is some not used space. and when you close som of the accordions the width changes again because of the scrollbar leaving that scrollbar width as not used space.

//Variabels
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
var buttonState = false;

$(window).resize(function() {
    // resize map when window is resized
    viewportWidth = $(window).width();
    viewportHeight = $("#sidebar").height();
    setMapDimensions();
});

//set map width according to viewport
function setMapDimensions() {
    viewportWidth = $(window).width();
    if(buttonState == true) {
        viewportHeight = $("#sidebar").height();
        $("#kaart").width(viewportWidth - 221);
        $("#kaart").height(viewportHeight);
    } else {
        viewportHeight = $(window).height();
        $("#kaart").width(viewportWidth);
        $("#kaart").height(viewportHeight);
    }
}

Any idea why this is?

Here is the jsfiddle demo:

http://jsfiddle.net/tDYcX/13/

Answer 1

I would solve it by just adding:

overflow-x: hidden;
overflow-y: visible;

to #sidebar.
The map will not resize and jump around then. Also gives a better user experience in my opinion. A lot like Google’s recent changes to their Gmail interface. Like theirs you should also consider using a custom scrollbar 🙂