Question

I have a navbar and 100% x 100% google map in my app. I would like to add a sidebar on the right with different filters. Reason for adding it on the right side is because of better experience on smaller screens as the right content is pushed below.

The map renders full screen with fluid (%) values when I just add the map after the last nav bar div, like this:

Map is visible:

<div class="navbar">
    <nav bar stuff......>
</div>
<div id="map-canvas"></div>

Map is not visible if I try to add it inside a span to control the size of it and add a side bar.

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span9">
            <div id="map-canvas"></div>
        </div>
        <div class="span3">
            <div class="well sidebar-nav">
                <ul class="nav nav-list">
                    <li class="nav-header">Sidebar</li>
                    <li class="active"><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

I don’t want to add a fixed value to the map, since it defeats the purpose of fluid.

Thanks in advance for any tips on how I can make the map visible inside a container-fluid.

Answer 1

Posted the answer I found as comment before, but to make it more visible, here is the answer: https://github.com/twbs/bootstrap/issues/2475

You must add a javascript callback that will manually set the height
of the map-canvas when the window is resized, for example.

$(window).resize(function () {
    var h = $(window).height(),
        offsetTop = 60; // Calculate the top offset

    $('#map-canvas').css('height', (h - offsetTop));
}).resize();