Bootstrap: Карта Google не отображается, когда находится в контейнере-жидкости

Созданный на 9 мар. 2012 · 3Комментарии · Источник: twbs/bootstrap

Привет,
В моем приложении есть панель навигации и карта Google 100% x 100%. Я хотел бы добавить справа боковую панель с другим фильтром. Причина добавления его с правой стороны - удобство работы на небольших экранах.

Когда я просто добавляю карту после последнего div панели навигации, карта отображается в полноэкранном режиме со значениями текучести (%), например:

Карта видна:

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

Карта не отображается, если я пытаюсь добавить ее в диапазон, чтобы контролировать ее размер и добавить боковую панель.

    <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>

Я не хочу добавлять на карту фиксированное значение, так как это противоречит цели жидкости.

Заранее спасибо!

Источник

fohlsom

Самый полезный комментарий

Невозможно сделать это, так как карта будет иметь высоту 0. Вы должны добавить обратный вызов javascript, который, например, вручную установит высоту холста карты при изменении размера окна.

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

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

BenjiZombie 9 мар. 2012

👍4

Все 3 Комментарий

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

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

BenjiZombie 9 мар. 2012

👍4

@BenjiZombie - Спасибо! Это решило это!

fohlsom 10 мар. 2012

Спасибо! После 10 различных предложений это работает быстро и легко!